Pure CSS Loader Animation

Pure CSS Loader Animation

HTML

  <div class="container">
  <div class="loader">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
</div>

SCSS

@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
$before:#e9e9e9;
$after:#121212;
$lineCount:12;
$speed:2s;
*{
  box-sizing:border-box;
}

.loader{
  height:rem(50px);
  width: rem(50px);
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  .line{
    height: 50%;
    width: 0;
    border:rem(4px) solid $before;
    position:absolute;
    left: 0;
    right: 0;
    margin:auto;
    transform-origin:bottom;
    border-radius:rem(10px);
    animation:lineAnimate $speed ease-in-out infinite alternate;
    @for $i from 1 through $lineCount{
      &:nth-child(#{$i}){
        transform:rotate(#{$i * (360 / $lineCount)}deg) translatey(-20px);
        animation-delay:#{$i * ($speed / $lineCount)};
      }
    }
  }
}


@keyframes lineAnimate{
  0%,40%{
    border-color:$before;
  }
  60%,100%{
    border-color:$after;
  }
}

 

CSS

.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
}

.loader {
  height: 3.125rem;
  width: 3.125rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loader .line {
  height: 50%;
  width: 0;
  border: 0.25rem solid #e9e9e9;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transform-origin: bottom;
  border-radius: 0.625rem;
  animation: lineAnimate 2s ease-in-out infinite alternate;
}
.loader .line:nth-child(1) {
  transform: rotate(30deg) translatey(-20px);
  animation-delay: 0.1666666667s;
}
.loader .line:nth-child(2) {
  transform: rotate(60deg) translatey(-20px);
  animation-delay: 0.3333333333s;
}
.loader .line:nth-child(3) {
  transform: rotate(90deg) translatey(-20px);
  animation-delay: 0.5s;
}
.loader .line:nth-child(4) {
  transform: rotate(120deg) translatey(-20px);
  animation-delay: 0.6666666667s;
}
.loader .line:nth-child(5) {
  transform: rotate(150deg) translatey(-20px);
  animation-delay: 0.8333333333s;
}
.loader .line:nth-child(6) {
  transform: rotate(180deg) translatey(-20px);
  animation-delay: 1s;
}
.loader .line:nth-child(7) {
  transform: rotate(210deg) translatey(-20px);
  animation-delay: 1.1666666667s;
}
.loader .line:nth-child(8) {
  transform: rotate(240deg) translatey(-20px);
  animation-delay: 1.3333333333s;
}
.loader .line:nth-child(9) {
  transform: rotate(270deg) translatey(-20px);
  animation-delay: 1.5s;
}
.loader .line:nth-child(10) {
  transform: rotate(300deg) translatey(-20px);
  animation-delay: 1.6666666667s;
}
.loader .line:nth-child(11) {
  transform: rotate(330deg) translatey(-20px);
  animation-delay: 1.8333333333s;
}
.loader .line:nth-child(12) {
  transform: rotate(360deg) translatey(-20px);
  animation-delay: 2s;
}

@keyframes lineAnimate {
  0%, 40% {
    border-color: #e9e9e9;
  }
  60%, 100% {
    border-color: #121212;
  }
}

 

Add a Comment

Your email address will not be published. Required fields are marked *