TheLazy.Dev
Portfolio GitHub

Blog

css |animation |beginners

Pure CSS Loader

raghavbhardwaj

Raghav Bhardwaj

Posted on July 22, 2022

Pure CSS Loader

A simple CSS only loader. Just using span and css animation. you can update the color by replacing background.

HTML/Pug

HTML

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
Enter fullscreen mode Exit fullscreen mode

Pug

.loader
  - for (var i = 1; i <= 17; i++) 
    span
Enter fullscreen mode Exit fullscreen mode

CSS/SCSS

CSS

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
.loader span {
  margin: 2px;
  display: block;
  background: #ff6800;
  width: 10px;
  border-radius: 10px;
}
.loader span:nth-child(1) {
  -webkit-animation: grow_shrink 2s ease-in-out -4s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -4s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -4s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -4s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(2) {
  -webkit-animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(3) {
  -webkit-animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(4) {
  -webkit-animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(5) {
  -webkit-animation: grow_shrink 2s ease-in-out -3s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(6) {
  -webkit-animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(7) {
  -webkit-animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(8) {
  -webkit-animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(9) {
  -webkit-animation: grow_shrink 2s ease-in-out -2s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(10) {
  -webkit-animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(11) {
  -webkit-animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(12) {
  -webkit-animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(13) {
  -webkit-animation: grow_shrink 2s ease-in-out -1s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(14) {
  -webkit-animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(15) {
  -webkit-animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(16) {
  -webkit-animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(17) {
  -webkit-animation: grow_shrink 2s ease-in-out 0s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out 0s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out 0s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out 0s infinite;
  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-moz-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-o-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
Enter fullscreen mode Exit fullscreen mode

SCSS

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  height:100vh;
  @include flex-center;
}
.loader {
  @include flex-center;
  height: 40px;
  span {
    margin: 2px;
    display: block;
    background: #ff6800;
    width: 10px;
    border-radius: 10px;
  }
  @for $i from 1 through 17 {
    span:nth-child(#{$i}) {
      -webkit-animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* Safari 4+ */
      -moz-animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* Fx 5+ */
      -o-animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* Opera 12+ */
      animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* IE 10+, Fx 29+ */
    }
  }
}

@-webkit-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-moz-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-o-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
Enter fullscreen mode Exit fullscreen mode

That's it.

You can check working demo here Codepen.

💖 💪 🙅 🚩
raghavbhardwaj
Raghav Bhardwaj

Posted on July 22, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Interactive typography rotation effects CSS | no javascript
webdev Interactive typography rotation effects CSS | no javascript

October 31, 2023

CSS tutorial series: CSS Animation
beginners CSS tutorial series: CSS Animation

February 3, 2023

Pure CSS Loader
css Pure CSS Loader

July 22, 2022

Simple, beginner steps: CSS animations!
beginners Simple, beginner steps: CSS animations!

April 27, 2022

Wave Animation for Words
webdev Wave Animation for Words

April 6, 2021