Pure CSS Customizable Loading Animation

loader.css

.loader-container {
  width: 100%;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.loader-container > div {
  border-radius: 50%;
  margin: 2px;
  background-color: black;
  
  animation: expand 2.5s ease-in-out infinite;
}

@keyframes expand {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }
  50% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  100% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }
}

.loader-container > .d1 { animation-delay: 0s; }
.loader-container > .d2 { animation-delay: 0.5s; }
.loader-container > .d3 { animation-delay: 1s; }
.loader-container > .d4 { animation-delay: 1.5s; }
.loader-container > .d5 { animation-delay: 2s; }

loader.html

<!-- 
Everything is controlled by the `loader-conatiner` class
d* represents the animation delay duration and goes up to 5
Add as many children as you want as long as it is in this format
Many interesting patterns can be created, the following is the most basic
-->


<div class="loader-container">
  <div class="d1"></div>
  <div class="d2"></div>
  <div class="d3"></div>
  <div class="d4"></div>
  <div class="d5"></div>
</div>

loader.js

// If you are using something like Vue.js you can create the loader more easily
var loader = Vue.component('loader', {
    template:
    `<div class="loader-container">
        <div 
        v-for="(del, index) in delayArr"
        :key="index"
        :class="'d'+del"
        ></div>
    </div>`,
    props: ['delays'],
    data () {
        return {
            delayArr: this.delays.split('')
        }
    }
})

// use it like <loader delays="12321">