Loading Animation

index.html

<div id="slider">
  <input id="circleQuantity" type="range" min="2" max="8" />
</div>
<div id="loading">
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Loading Animation

script.js

$(document).ready(function() {
  var $buttons = $('#slider'),
      $loadingContainer = $('#loading'),
      circleQuantity = $buttons.find('#circleQuantity');
  
  circleQuantity.change(function(e) {
    $loadingContainer.empty();
    for(var i =0; i<e.target.value; i++) {
      $loadingContainer.append('<div class="circle"></div>');
    }
  })
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

$color: hsl(30, 11%, 94%);
$background: #927FBF;
$duration: 1.9s;
$a: 40% at 50% 50%;
$b: 25% at 50% 50%;
@mixin path($path) {
  -webkit-clip-path: circle($path);
  clip-path: circle($path);
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: $background;
  overflow: hidden;
  font-family: 'Coda', cursive;
}
#slider {
  margin-bottom: 50px;
  text-align: center;
}

#loading {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: spin $duration ease infinite;
}

.circle {
  width: 20px;
  height: 20px;
  background: $color;
  animation: loader $duration ease infinite both;
}

@keyframes loader {
  0% { @include path($b); }
  30% { @include path($a); }
  100% { @include path($b); }
}

@keyframes spin {
  0% { transform: rotate(-10turn); }
  30% { transform: rotate(0turn); }
  100% { transform: rotate(-10turn); }
}

styles

<link href="https://fonts.googleapis.com/css?family=Coda" rel="stylesheet" />