.wrapper
  - 6.times do
    .slice
  
View Compiled
* {
  box-sizing: border-box;
}

body { background: #222a2c; }

$baseSize: 100;
$baseColor: #42d2b0;

.wrapper {
  position: relative;
  margin: 50px auto;
  width: 200px;
  height: 200px;
  
  //background: red;
}

.slice {
  position: absolute;
  top: 50%;
  left: 50%;
  
  width: #{$baseSize}px;
  
  border: #{$baseSize}px solid transparent;
  border-left-width: 58px;
  border-right-width: 58px;
  border-top-color: $baseColor;
  
  transform: translate(-50%, -50%);
  
  @for $i from 1 through 6 {
    &:nth-child(#{$i}) {
      border-top-color: adjust-hue($baseColor, ($i - 1) * 10deg);
      transform: translate(-50%, -50%) rotate(#{($i - 1) * 60}deg) scale(0);
      animation: sparkleLoad-#{$i} 2s  #{$i * 0.07}s infinite;
    }
  }
}

@for $i from 1 through 6 {
  @keyframes sparkleLoad-#{$i} {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(#{($i - 1) * 60}deg) scale(0);
    }

    25%,
    75% {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(#{($i - 1) * 60}deg) scale(1);
    }
    
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) rotate(#{($i - 1) * 60}deg) scale(0);
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js