@Keyframes 1.9.4 | Dot Spinner

index.html

<a href="https://youtu.be/XqWsvQxKNac" target="_blank" data-keyframers-credit style="color: #FFF"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div class="triangles">
  <div class="triangle">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="triangle -big">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="triangle -bigger">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  
  <div class="triangle -other">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="triangle -other -big">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="triangle -other -bigger">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

keyframes-1-9-4-dot-spinner.markdown

@keyframes 1.9.4 | Dot Spinner

Watch the @keyframers build this live! https://youtu.be/XqWsvQxKNac

The pen isn't buffering, we're just building loaders! David Khourshid and Stephen Shaw tackle a variety of different loader animations using only CSS. Some are spectacular, some are... spectacular failures. All of them will surely delight! Streamed live on June 7, 2018.

Final Code Collection: https://codepen.io/collection/nevLNZ/

Original animation: https://dribbble.com/shots/4645074-Loading-spinner

A Pen by Shaw on CodePen.

License.

keyframes-1-9-4-overloadered-5.markdown

@keyframes 1.9.4 | Overloadered 5

https://dribbble.com/shots/4645074-Loading-spinner

A Pen by Shaw on CodePen.

License.

style.scss

$duration: 3s;
$ease: cubic-bezier(.9,0,.1,1);

.triangles {
  height: 50vmin;
  width: 50vmin;
  perspective: 10px;
  transform-style: preserve-3d;
  animation: triangle-depth $duration $ease infinite;
}

@keyframes triangle-depth {
  0%, 100% {
    perspective: 14px;
    transform: scale(.8)
  }
  50% {
    perspective: 70px;
    transform: scale(1.3)
  }
}


.triangle {
  --z: 0px;
  --size: 15%;
  
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  isolation: isolate;
  mix-blend-mode: screen;
  transform: translateZ(var(--z)) rotate(0turn);
  animation: triangle-spin $duration $ease infinite;
  
  &.-other {
    --size: 10%;
    transform: translateZ(var(--z)) rotate(60deg) rotate(0turn);
    animation-name: other-triangle-spin;
  }
}

@keyframes triangle-spin {
  100% {
    transform: translateZ(var(--z)) rotate(1turn);
  } 
}

@keyframes other-triangle-spin {
  100% {
    transform: translateZ(var(--z)) rotate(60deg) rotate(1turn);
  } 
}


$green: #77FA59;
$red: #EA373B;
$blue: #1128F5;

.dot {
  position: absolute;
  border-radius: 50%;
  background: $blue;
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
  width: var(--size);
  height: var(--size);
  // mix-blend-mode: lighten;
  transform-style: preserve-3d;

  // opacity: .5;
  --z: 0px;

  @for $i from 1 through 3 {
    &:nth-child(#{$i}) {
      transform:
        rotate(#{$i / 3}turn)
        translateX(200%)
        translateZ(var(--z));
    }
  }

}

.-big {

  --z: 3px;
  .dot {
    // --size: 13%;
    background: $green;
  }
}

.-bigger {

  --z: 5px;
  .dot {
    // --size: 18%;
    background: $red;
    z-index: 30;
  }
}

/* ---------------------------------- */

body, html {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #191030;
  overflow: hidden;
}