<div class="loader">
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100" id=circle-middle><circle fill=#EDEDED cx=50 cy=50 r="6"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
  <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><circle fill=#26A6D1 cx=50 cy=50 r="4.5"/></svg>
</div>

// Demo SHITE
// ====================================
html,body {height: 100%;margin:0;}body{display: flex;flex-direction:column;align-items: center;justify-content:center;width:100%;background:#324D5B;}svg{max-width:100%;}


// Required SHITE
// ====================================

$circle-count: 13;
$loader-proportion: 100px;
$animation_config: (
  name: spin,
  duration: 1s,
  timing: ease-in-out,
  iteration: infinite,
  direction: alternate,
  fill-mode: both
);

@function sh-setup($config) {
  @return zip(map-values($config)...);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loader {
  animation: sh-setup($animation_config);
  height: $loader-proportion;
  position: relative;
  width: $loader-proportion;

  svg:not(#circle-middle) {
    animation: sh-setup($animation_config);
    position: absolute;
    top: -50%;
    left: 0;
    transform-origin: bottom center;
  }
}

@for $i from 1 through $circle-count {
  .loader svg:nth-of-type(#{$i}):not(#circle-middle) {
    transform: rotate(($i * (360/($circle-count - 1))) + deg);
  }
}