``````<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;
}

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

@function sin(\$angle) {
\$sin: 0;
@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;
@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);
}

\$dotNums: 14;
\$dotColor: #f36;

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

div {
position: relative;
}

color: \$dotColor;
transform-origin: center;
font-size: 0;
margin: 50px auto;

div {
color: \$dotColor;

position: absolute;
top: 50%;
left: 50%;

span {
animation: ball-spin 1s infinite ease-in-out;

display: block;
background-color: currentColor;
border: 0 solid currentColor;
}

@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);
}
}
``````

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

This Pen doesn't use any external JavaScript resources.