Color Wheel Preloader

color-wheel-preloader.markdown

Color Wheel Preloader

Trying to use SCSS to make a loading spinner. I know I am not using SCSS quite effectively yet, still practicing!

A Pen by cindy massey on CodePen.

License.

index.html

<div class="loader">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
<div class="circle"></div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

style.scss

$barCount: 12;
@keyframes loader-spin{
  0% { transform: translate(-50%, -50%) rotate(0deg)}
  100% { transform: translate(-50%, -50%) rotate(360deg)}
}

body{
  display: flex;
  flex: 1;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: #1a1a1a;
}

.loader {
  animation: loader-spin 5s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes circle-anim {
  0% {
    transform: translate(-50%, -50%) scale(1,1);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.3,1.3);
  }
  50% {
    transform: translate(-50%, -50%) scale(.85,.85);
  }
  75% {
    transform: translate(-50%, -50%) scale(1.2,1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1,1);
  }
}
.circle{
  animation: circle-anim 10s ease infinite;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bar { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 70px;
  border-radius: 10px;
}

$colors: (
  1: #FF7F00, 2: #FFFF00, 
  3: #7FFF00, 4: #00FF00, 5: #00FF7F,
  6: #00FFFF, 7: #007FFF, 8: #0000FF,
  9: #7F00FF, 10: #FF00FF, 11: #FF007F, 
  12: #FF0000, 
);

@mixin bar-transform($i){
  transform: translate(-50%, -100%) rotate($i * 30deg);
}

@for $i from 1 through $barCount {
  @keyframes bar-anim-#{$i} {
    0% { 
      transform: translate(-50%, -100%) rotate($i * 30deg) scale(1,1); 
    }
    20% { 
      transform: translate(-50%, -100%) rotate($i * 30deg) scale(1.1,1.2); 
    }
    40% {
      transform: translate(-50%, -100%) rotate($i * 30deg) scale(1,1.1); 
      // filter: brightness(150%);
      opacity: .7;
    }
    60% {
      transform: translate(-50%, -100%) rotate($i * 30deg) scale(1.2,1.25); 
      opacity: .5;
    }
    80% {
      transform: translate(-50%, -100%) rotate($i * 30deg) scale(1.3,1.1);
      // filter: brightness(50%);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -100%) rotate($i * 30deg) scale(1,1); 
    }
  }
}

@mixin bar-anim($i){
  animation: bar-anim-#{$i} 2s $i*0.3s ease infinite;
}

@for $i from 1 through $barCount {
  .bar:nth-child(#{$i}) {
    background-color: map-get($colors, $i);
    @include bar-transform($i);
    transform-origin: 50% 100%;
    @include bar-anim($i);
  }
}

thanks