loading animaton

using dots

by Alexandru Gatea

HTML

<ul class="loading">
  <li>
    <span class="eye"></span><span class="mouth"></span>
  </li>
  <li></li>
  <li></li>
  <li></li>
</ul>

SCSS

/* reset browser */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  background: #212121;
}

.loading {
  display: block;
  width: 122px;
  height: 122px;
  font-size: 0;
  text-align: center;
  padding: 50px 0;
  position: fixed;
  top: 50%;
  margin-top: -61px;
  margin-left: -61px;
  left: 50%;
  z-index: 1;
  transition: all 1s ease;
  border-radius: 50%;
  li {
    display: inline-block;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation-name: loading;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    background: #fff;
    transition: all 0.5s ease;
    z-index: 2;
    position: absolute;
    margin-top: -15px;
    top: 50%;
    &:nth-child(1) {
      background: #f44336;
      animation-delay: 0.25s;
      left: 5px;
    }
    &:nth-child(2) {
      background: #8BC34A;
      animation-delay: 0.5s;
      left: 35px;
    }
    &:nth-child(3) {
      background: #2196F3;
      animation-delay: 0.75s;
      left: 65px;
    }
    &:nth-child(4) {
      background: #FFC107;
      animation-delay: 1s;
      left: 95px;
    }
  }
}

@keyframes loading {
  from {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(25px);
  }
  to {
    transform: translateY(-1px);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}

.loading.circle {
  /* border: 1px solid white; */
  width: 122px;
  height: 122px;
  margin-top: -61px;
  margin-left: -61px;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
  li {
    animation: none;
    position: absolute;
    margin-top: -10px;
    margin-left: -10px;
    transition: all 0.5s ease-in-out;
    &:nth-child(1) {
      top: 50%;
      left: 5px;
      animation-delay: 0.1s;
    }
    &:nth-child(2) {
      top: 30px;
      left: 10px;
      animation-delay: 0.3s;
    }
    &:nth-child(3)...

JavaScript

jQuery(document).ready(function($) {
  setInterval(function() {
    changeSpin();
  }, 12000);

  function changeSpin() {
    setTimeout(function() {
      $('.loading').addClass('circle');
    }, 6000);
    setTimeout(function() {
      $('.loading').removeClass('circle');
    }, 9000);
  }
});