Preloader HTML CSS

index.html

<div class="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

preloader2.markdown

#2

Posted on instagram.com/sasha.codes

A Pen by Amolo on CodePen.

License.

style.scss

// pastel rainbow
$color-4: #07bdda;
$color-2: #DC6BAD;
$color-1: #EAB885;
$color-5: #4cd3ba;
$color-3: #7badd6;

$color: $color-1, $color-2, $color-3, $color-4, $color-5;

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

ul {
  display: flex;
  li {
    transition: 0.5s all ease;
    width: 20px;
    height: 20px;
    list-style-type: none;
    margin: 10px;
    animation: right 1s infinite;
  }

  @for $i from 1 through 5 {
    li:nth-child(#{$i}) {
      background-color: nth($color, $i);
      animation-delay: 500ms * $i;
      //  change this      
    }
  }

  &:hover {
    li {
      transition: 0.5s all ease;
    }

    @for $i from 1 through 5 {
      li:nth-child(#{$i}) {
        animation-delay: 100ms * $i;
      }
    }
  }
}

@keyframes right {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}