DEV Community

Cover image for Pure CSS Loader
Raghav Bhardwaj
Raghav Bhardwaj

Posted on • Edited on

Pure CSS Loader

#css #animation #beginners

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.

Top comments (0)

Read next

thomascoucke profile image

Angular resources I often return to

Thomas Coucke -

jutionck profile image

Kubernetes: Install Tools

Jution Candra Kirana -

prince_beec5ccde00b7c6c73 profile image

Logo's designing effect in html css

Prince -

56_kode profile image

Taming Long Text: The Art of Truncation with CSS

56kode -