<div class="loading">
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
</div>

@function pi() {
	@return 3.14159265359;
}

@function pow($number, $exp) {
	$value: 1;
	@if $exp > 0 {
		@for $i from 1 through $exp {
			$value: $value * $number;
		}
	}
	@else if $exp < 0 {
		@for $i from 1 through -$exp {
			$value: $value / $number;
		}
	}
	@return $value;
}

@function fact($number) {
	$value: 1;
	@if $number > 0 {
		@for $i from 1 through $number {
			$value: $value * $i;
		}
	}
	@return $value;
}

@function rad($angle) {
	$unit: unit($angle);
	$unitless: $angle / ($angle * 0 + 1);
	@if $unit == deg {
		$unitless: $unitless / 180 * pi();
	}
	@return $unitless;
}

@function sin($angle) {
	$sin: 0;
	$angle: rad($angle);
	@for $i from 0 through 10 {
		$sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
	}
	@return $sin;
}

@function cos($angle) {
	$cos: 0;
	$angle: rad($angle);
	@for $i from 0 through 10 {
		$cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
	}
	@return $cos;
}

@function tan($angle) {
	@return sin($angle) / cos($angle);
}

$loadingSize: 200px;
$dotRadius: 24px;
$dotNums: 14;
$dotColor: #f36;

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  position: relative;
}

.loading {
  width: $loadingSize;
  height: $loadingSize;
  color: $dotColor;
  transform-origin: center;
  font-size: 0;
  margin: 50px auto;
  border-radius: 50%;
  
  div {
    color: $dotColor;
    width: $dotRadius;
    height: $dotRadius;
    margin-top: $dotRadius / 2;
    margin-left: $dotRadius / 2;

    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    
    span {
      width: $dotRadius;
      height: $dotRadius;
      animation: ball-spin 1s infinite ease-in-out;  
      
      display: block;
      background-color: currentColor;
      border: 0 solid currentColor;
      border-radius: 100%;      
    }
    
    @for $i from 1 through 14 {
    &:nth-child(#{$i}) {
      transform: translate(cos(($i - 1) * 360deg / $dotNums) * $loadingSize / 2, sin(($i - 1) * 360deg / $dotNums) * $loadingSize / 2);
        & > span {
      animation-delay: -(1 + $i * 1 / $dotNums) * 1s
          
          }
      }
       
    }
  }
  
}

@keyframes ball-spin {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 0;
      transform: scale(0);
    }
}