.spin360-preloader
  .spin360-preloader__slice
  .spin360-preloader__slice
  .spin360-preloader__slice
  .spin360-preloader__slice
View Compiled
@mixin waitAnimate($options: ()) {

  $options: map-merge((
    animationName: waitAnimate,
    duration: 1,
    waitTime: 0,
    timingFunction: linear,
    iterationCount: infinite
  ), $options);

  $name: map-get($options, animationName);
  $kf: map-get($options, keyframes);
  $kfLength: length($kf);
  $duration: map-get($options, duration);
  $waitTime: map-get($options, waitTime);
  $timingFunction: map-get($options, timingFunction);
  $iterationCount: map-get($options, iterationCount);
  $counter: 1; // index of 'each'

  @keyframes #{$name} {
    @each $frame, $prop in $kf {
      #{$frame * $duration / ($duration + $waitTime)}% {
        @each $k, $v in $prop {
          #{$k}: #{$v}
        }
      }
  
      @if $counter == $kfLength and $waitTime > 0 {
        100% {
          @each $k, $v in $prop {
            #{$k}: #{$v}
          }
        }
      }
      $counter: $counter+1;
    }
  }

  .#{$name} {
    animation: #{$name} #{$duration + $waitTime}s #{$timingFunction} #{$iterationCount};
  }

}

body {
  background: #fff;
}


$offset: 6px;
$duration: 0.8s;
$shifted-duration: $duration - 0.35s;
$wait-time: $shifted-duration*4 - 0.15s*4 + 1.2s;
$full-duration: $shifted-duration + $wait-time - 0.9s;

@include waitAnimate(
  (
    animationName: jump_1,
    keyframes: (
      0: (
        transform: translateY(0),
      ),
      50: (
        transform: translateY(-$offset),
      ),
      100: (
        transform: translateY(0)
      )
    ),
    duration: $duration,
    waitTime: $wait-time,
    timingFunction: ease,
    iterationCount: infinite
  )
);

@include waitAnimate(
  (
    animationName: jump_3,
    keyframes: (
      0: (
        transform: translateY(0),
      ),
      50: (
        transform: translateY($offset),
      ),
      100: (
        transform: translateY(0)
      )
    ),
    duration: $duration,
    waitTime: $wait-time,
    timingFunction: ease,
    iterationCount: infinite
  )
);

@include waitAnimate(
  (
    animationName: jump_2,
    keyframes: (
      0: (
        transform: translateX(0),
      ),
      50: (
        transform: translateX($offset),
      ),
      100: (
        transform: translateX(0)
      )
    ),
    duration: $duration,
    waitTime: $wait-time,
    timingFunction: ease,
    iterationCount: infinite
  )
);

@include waitAnimate(
  (
    animationName: jump_4,
    keyframes: (
      0: (
        transform: translateX(0),
      ),
      50: (
        transform: translateX(-$offset),
      ),
      100: (
        transform: translateX(0)
      )
    ),
    duration: $duration,
    waitTime: $wait-time,
    timingFunction: ease,
    iterationCount: infinite
  )
);

@include waitAnimate(
  (
    animationName: rotation,
    keyframes: (
      0: (
        transform: rotate(0deg)
      ),
      100: (
        transform: rotate(360deg)
      )
    ),
    duration: $duration,
    waitTime: $full-duration,
    timingFunction: ease,
    iterationCount: infinite
  )
);

.spin360-preloader {
  width: 32px;
  height: 32px;
  margin: 50px auto 0;
  position: relative;
  animation: rotation $full-duration ease $shifted-duration + $wait-time - $duration - 0.3s infinite;
}

.spin360-preloader__slice {
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  
  &:nth-child(1) {
    border-width: 16px 16px 0 16px;
    border-color: #ffdf02 transparent transparent transparent;
    border-radius: 16px 16px 0 0;
    top: 0;
    left: 0;
    animation: jump_1 $full-duration ease 0s infinite;
  }
  &:nth-child(2) {
    border-width: 16px 16px 16px 0;
    border-color: transparent #ffc800 transparent transparent;
    top: 0;
    right: 0;
    border-radius: 0 16px 16px 0;
    animation: jump_2 $full-duration ease $shifted-duration*2 infinite;
  }
  &:nth-child(3) {
    border-width: 0 16px 16px 16px;
    border-color: transparent transparent #ff9e02 transparent;
    bottom: 0;
    right: 0;
    border-radius: 0 0 16px 16px;
    animation: jump_3 $full-duration ease $shifted-duration infinite;
  }
  &:nth-child(4) {
    border-width: 16px 0 16px 16px;
    border-color: transparent transparent transparent #f69402;
    top: 0;
    left: 0;
    border-radius: 16px 0 0 16px;
    animation: jump_4 $full-duration ease $shifted-duration*3 infinite;
  }
}

View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.