Breaking News: Grepper is joining You.com. Read the official announcement!

animaciones css para loading

Mysterious Macaque answered on November 28, 2023 Popularity 1/10 Helpfulness 1/10

answer animaciones css para loading

animaciones css para loading

Comment

@keyframes loading {
  0%, 100% {
    margin-top: 25px;
    height: 10px;
  }

  50%{
    margin-top: 0px;
    height: 50px;
  }
}

ul {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 5px;
}

li {
  background-color: var(--color-primary);
  width: 10px;
  height: 10px;
  animation: loading 1s ease-in-out infinite;
}

li:nth-child(1) {
  animation-delay: 0s;
}

li:nth-child(2) {
  animation-delay: -0.2s;
}

li:nth-child(3) {
  animation-delay: -0.4s;
}

li:nth-child(4) {
  animation-delay: -0.6s;
}

li:nth-child(5) {
  animation-delay: -0.8s;
}

Popularity 1/10 Helpfulness 1/10 Language css

Source: www.felixsanz.dev

Tags: css loading

Link to this answer
Share Copy Link