DNA page loader

dna-page-loader.markdown

DNA page loader

A Pen by Konstantin on CodePen.

License.

index.html

<div class="container">
  <div class="loader_1">
    <div class="loader_1-item"></div>
    <div class="loader_1-item"></div>
    <div class="loader_1-item"></div>
    <div class="loader_1-item"></div>
    <div class="loader_1-item"></div>
    <div class="loader_1-item"></div>
    <div class="loader_1-item"></div>
    <div class="loader_1-item"></div>
  </div>
  <div class="loader_2">
    <div class="loader_2-item"></div>
    <div class="loader_2-item"></div>
    <div class="loader_2-item"></div>
    <div class="loader_2-item"></div>
    <div class="loader_2-item"></div>
    <div class="loader_2-item"></div>
    <div class="loader_2-item"></div>
    <div class="loader_2-item"></div>
  </div>
  <div class="loader_3">
    <div class="loader_3-item"></div>
    <div class="loader_3-item"></div>
    <div class="loader_3-item"></div>
    <div class="loader_3-item"></div>
    <div class="loader_3-item"></div>
    <div class="loader_3-item"></div>
    <div class="loader_3-item"></div>
    <div class="loader_3-item"></div>
  </div>
</div>

style.scss

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #bdc3c7, #2c3e50);
}
.container {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader_1, .loader_2 {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotate(20deg);
  z-index: 20;
  
  &-item {
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    margin: 5px;
    animation: animate 4s linear infinite;
  }
}

.loader_1 {
  &-item {
    box-shadow: 0 0 2px #18594C;
    background: #18594C;
    opacity: .8;
  }
}

.loader_2 {
  &-item {
    box-shadow: 0 0 2px #87C359;
    background: #87C359;
    opacity: .8;
  }
}

.loader_3 {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotate(20deg);
  z-index: 10;
  
  &-item {
    width: 30px;
    height: 3px;
    background: #fff;
    box-shadow: 0 0 2px #fff;
    margin: 11px;
    opacity: .8;
    animation: width 2s linear infinite;
  }
}

@for $i from 1 through 8 {
  .loader_1-item:nth-child(#{$i}) {
    animation-delay: -$i/10 + s;
  }
}

@for $i from 1 through 8 {
  .loader_2-item:nth-child(#{$i}) {
    animation-delay: -$i/10 - 2 + s;
  }
}

@for $i from 1 through 8 {
  .loader_3-item:nth-child(#{$i}) {
    animation-delay: -$i/10 + s;
  }
}

@keyframes animate {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(25px);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(-25px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes width {
  0% {
    width: 2px;
  }
  50% {
    width: 20px;
  }
  100% {
    width: 2px;
  }
}