Pure CSS Dots Loader Animation

Pure CSS Dots Loader Animation

HTML

<div class="container">
     <div class="loader">
       <div class="dot"></div>
       <div class="dot"></div>
       <div class="dot"></div>
       <div class="dot"></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;
}

$speed: 2s;
$timing: cubic-bezier(0.92, 0.05, 0.26, 1);
$background: #f61067;
$dotColor: #ffffff;

$loaderWidth: 100px;
$loaderHeight: 20px;
$width: $loaderWidth / 5;
$height: $width;
$halfWidth: $width / 2;

body {
  background-color: $background;
}

.loader {
  height: rem($loaderHeight);
  width: rem($loaderWidth);
  display: inline-flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  justify-content: space-between;
  align-items: center;
  .dot {
    height: rem($height);
    width: rem($width);
    background-color: darken($background, 10%);
    border-radius: rem(500px);
    &:nth-child(4) {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      background-color: $dotColor;
      animation: dotAnimate $speed $timing infinite alternate;
      z-index: 1;
    }
  }
}

@keyframes dotAnimate {
  0% {
    left: 0;
    transform: translateX(0);
    width: rem($width);
  }
  25% {
    left: 0;
    transform: translateX(0);
    width: rem($width * 3);
  }
  50% {
    left: 50%;
    transform: translateX(-$halfWidth);
    width: rem($width);
  }
  75% {
    left: 50%;
    transform: translateX(-$halfWidth);
    width: rem($width * 3);
  }
  100% {
    left: 100%;
    transform: translateX(-$width);
    width: rem($width);
  }
}

CSS

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

body {
  background-color: #f61067;
}

.loader {
  height: 1.25rem;
  width: 6.25rem;
  display: inline-flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}
.loader .dot {
  height: 1.25rem;
  width: 1.25rem;
  background-color: #cb0852;
  border-radius: 31.25rem;
}
.loader .dot:nth-child(4) {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #ffffff;
  animation: dotAnimate 2s cubic-bezier(0.92, 0.05, 0.26, 1) infinite alternate;
  z-index: 1;
}

@keyframes dotAnimate {
  0% {
    left: 0;
    transform: translateX(0);
    width: 1.25rem;
  }
  25% {
    left: 0;
    transform: translateX(0);
    width: 3.75rem;
  }
  50% {
    left: 50%;
    transform: translateX(-10px);
    width: 1.25rem;
  }
  75% {
    left: 50%;
    transform: translateX(-10px);
    width: 3.75rem;
  }
  100% {
    left: 100%;
    transform: translateX(-20px);
    width: 1.25rem;
  }
}

 

Add a Comment

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