<style>
body {
	background: hsl(0, 0%, 10%);
}

.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	perspective: 200px;
}

i {
	display: block;
	position: absolute;
	opacity: 1;
}
i::before {
	display: block;
	width: 6px;
	height: 6px;
	content: "";
	background-color: white;
	border-radius: 50%;
	box-shadow: 0 0 14px white;
	animation-name: spin;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

/* transform: rotate($i / $particles * 360); */
/* animation-delay: $i * ($lapDuration / ($particles - 2)); */

i:nth-child(1) {
	transform: rotate(3.6deg) translate3d(100px, 0, 0);
}
i:nth-child(1)::before {
	animation-delay: 0.03061s;
}

i:nth-child(2) {
	transform: rotate(7.2deg) translate3d(100px, 0, 0);
}
i:nth-child(2)::before {
	animation-delay: 0.06122s;
}

i:nth-child(3) {
	transform: rotate(10.8deg) translate3d(100px, 0, 0);
}
i:nth-child(3)::before {
	animation-delay: 0.09184s;
}

i:nth-child(4) {
	transform: rotate(14.4deg) translate3d(100px, 0, 0);
}
i:nth-child(4)::before {
	animation-delay: 0.12245s;
}

i:nth-child(5) {
	transform: rotate(18deg) translate3d(100px, 0, 0);
}
i:nth-child(5)::before {
	animation-delay: 0.15306s;
}

i:nth-child(6) {
	transform: rotate(21.6deg) translate3d(100px, 0, 0);
}
i:nth-child(6)::before {
	animation-delay: 0.18367s;
}

i:nth-child(7) {
	transform: rotate(25.2deg) translate3d(100px, 0, 0);
}
i:nth-child(7)::before {
	animation-delay: 0.21429s;
}

i:nth-child(8) {
	transform: rotate(28.8deg) translate3d(100px, 0, 0);
}
i:nth-child(8)::before {
	animation-delay: 0.2449s;
}

i:nth-child(9) {
	transform: rotate(32.4deg) translate3d(100px, 0, 0);
}
i:nth-child(9)::before {
	animation-delay: 0.27551s;
}

i:nth-child(10) {
	transform: rotate(36deg) translate3d(100px, 0, 0);
}
i:nth-child(10)::before {
	animation-delay: 0.30612s;
}

i:nth-child(11) {
	transform: rotate(39.6deg) translate3d(100px, 0, 0);
}
i:nth-child(11)::before {
	animation-delay: 0.33673s;
}

i:nth-child(12) {
	transform: rotate(43.2deg) translate3d(100px, 0, 0);
}
i:nth-child(12)::before {
	animation-delay: 0.36735s;
}

i:nth-child(13) {
	transform: rotate(46.8deg) translate3d(100px, 0, 0);
}
i:nth-child(13)::before {
	animation-delay: 0.39796s;
}

i:nth-child(14) {
	transform: rotate(50.4deg) translate3d(100px, 0, 0);
}
i:nth-child(14)::before {
	animation-delay: 0.42857s;
}

i:nth-child(15) {
	transform: rotate(54deg) translate3d(100px, 0, 0);
}
i:nth-child(15)::before {
	animation-delay: 0.45918s;
}

i:nth-child(16) {
	transform: rotate(57.6deg) translate3d(100px, 0, 0);
}
i:nth-child(16)::before {
	animation-delay: 0.4898s;
}

i:nth-child(17) {
	transform: rotate(61.2deg) translate3d(100px, 0, 0);
}
i:nth-child(17)::before {
	animation-delay: 0.52041s;
}

i:nth-child(18) {
	transform: rotate(64.8deg) translate3d(100px, 0, 0);
}
i:nth-child(18)::before {
	animation-delay: 0.55102s;
}

i:nth-child(19) {
	transform: rotate(68.4deg) translate3d(100px, 0, 0);
}
i:nth-child(19)::before {
	animation-delay: 0.58163s;
}

i:nth-child(20) {
	transform: rotate(72deg) translate3d(100px, 0, 0);
}
i:nth-child(20)::before {
	animation-delay: 0.61224s;
}

i:nth-child(21) {
	transform: rotate(75.6deg) translate3d(100px, 0, 0);
}
i:nth-child(21)::before {
	animation-delay: 0.64286s;
}

i:nth-child(22) {
	transform: rotate(79.2deg) translate3d(100px, 0, 0);
}
i:nth-child(22)::before {
	animation-delay: 0.67347s;
}

i:nth-child(23) {
	transform: rotate(82.8deg) translate3d(100px, 0, 0);
}
i:nth-child(23)::before {
	animation-delay: 0.70408s;
}

i:nth-child(24) {
	transform: rotate(86.4deg) translate3d(100px, 0, 0);
}
i:nth-child(24)::before {
	animation-delay: 0.73469s;
}

i:nth-child(25) {
	transform: rotate(90deg) translate3d(100px, 0, 0);
}
i:nth-child(25)::before {
	animation-delay: 0.76531s;
}

i:nth-child(26) {
	transform: rotate(93.6deg) translate3d(100px, 0, 0);
}
i:nth-child(26)::before {
	animation-delay: 0.79592s;
}

i:nth-child(27) {
	transform: rotate(97.2deg) translate3d(100px, 0, 0);
}
i:nth-child(27)::before {
	animation-delay: 0.82653s;
}

i:nth-child(28) {
	transform: rotate(100.8deg) translate3d(100px, 0, 0);
}
i:nth-child(28)::before {
	animation-delay: 0.85714s;
}

i:nth-child(29) {
	transform: rotate(104.4deg) translate3d(100px, 0, 0);
}
i:nth-child(29)::before {
	animation-delay: 0.88776s;
}

i:nth-child(30) {
	transform: rotate(108deg) translate3d(100px, 0, 0);
}
i:nth-child(30)::before {
	animation-delay: 0.91837s;
}

i:nth-child(31) {
	transform: rotate(111.6deg) translate3d(100px, 0, 0);
}
i:nth-child(31)::before {
	animation-delay: 0.94898s;
}

i:nth-child(32) {
	transform: rotate(115.2deg) translate3d(100px, 0, 0);
}
i:nth-child(32)::before {
	animation-delay: 0.97959s;
}

i:nth-child(33) {
	transform: rotate(118.8deg) translate3d(100px, 0, 0);
}
i:nth-child(33)::before {
	animation-delay: 1.0102s;
}

i:nth-child(34) {
	transform: rotate(122.4deg) translate3d(100px, 0, 0);
}
i:nth-child(34)::before {
	animation-delay: 1.04082s;
}

i:nth-child(35) {
	transform: rotate(126deg) translate3d(100px, 0, 0);
}
i:nth-child(35)::before {
	animation-delay: 1.07143s;
}

i:nth-child(36) {
	transform: rotate(129.6deg) translate3d(100px, 0, 0);
}
i:nth-child(36)::before {
	animation-delay: 1.10204s;
}

i:nth-child(37) {
	transform: rotate(133.2deg) translate3d(100px, 0, 0);
}
i:nth-child(37)::before {
	animation-delay: 1.13265s;
}

i:nth-child(38) {
	transform: rotate(136.8deg) translate3d(100px, 0, 0);
}
i:nth-child(38)::before {
	animation-delay: 1.16327s;
}

i:nth-child(39) {
	transform: rotate(140.4deg) translate3d(100px, 0, 0);
}
i:nth-child(39)::before {
	animation-delay: 1.19388s;
}

i:nth-child(40) {
	transform: rotate(144deg) translate3d(100px, 0, 0);
}
i:nth-child(40)::before {
	animation-delay: 1.22449s;
}

i:nth-child(41) {
	transform: rotate(147.6deg) translate3d(100px, 0, 0);
}
i:nth-child(41)::before {
	animation-delay: 1.2551s;
}

i:nth-child(42) {
	transform: rotate(151.2deg) translate3d(100px, 0, 0);
}
i:nth-child(42)::before {
	animation-delay: 1.28571s;
}

i:nth-child(43) {
	transform: rotate(154.8deg) translate3d(100px, 0, 0);
}
i:nth-child(43)::before {
	animation-delay: 1.31633s;
}

i:nth-child(44) {
	transform: rotate(158.4deg) translate3d(100px, 0, 0);
}
i:nth-child(44)::before {
	animation-delay: 1.34694s;
}

i:nth-child(45) {
	transform: rotate(162deg) translate3d(100px, 0, 0);
}
i:nth-child(45)::before {
	animation-delay: 1.37755s;
}

i:nth-child(46) {
	transform: rotate(165.6deg) translate3d(100px, 0, 0);
}
i:nth-child(46)::before {
	animation-delay: 1.40816s;
}

i:nth-child(47) {
	transform: rotate(169.2deg) translate3d(100px, 0, 0);
}
i:nth-child(47)::before {
	animation-delay: 1.43878s;
}

i:nth-child(48) {
	transform: rotate(172.8deg) translate3d(100px, 0, 0);
}
i:nth-child(48)::before {
	animation-delay: 1.46939s;
}

i:nth-child(49) {
	transform: rotate(176.4deg) translate3d(100px, 0, 0);
}
i:nth-child(49)::before {
	animation-delay: 1.5s;
}

i:nth-child(50) {
	transform: rotate(180deg) translate3d(100px, 0, 0);
}
i:nth-child(50)::before {
	animation-delay: 1.53061s;
}

i:nth-child(51) {
	transform: rotate(183.6deg) translate3d(100px, 0, 0);
}
i:nth-child(51)::before {
	animation-delay: 1.56122s;
}

i:nth-child(52) {
	transform: rotate(187.2deg) translate3d(100px, 0, 0);
}
i:nth-child(52)::before {
	animation-delay: 1.59184s;
}

i:nth-child(53) {
	transform: rotate(190.8deg) translate3d(100px, 0, 0);
}
i:nth-child(53)::before {
	animation-delay: 1.62245s;
}

i:nth-child(54) {
	transform: rotate(194.4deg) translate3d(100px, 0, 0);
}
i:nth-child(54)::before {
	animation-delay: 1.65306s;
}

i:nth-child(55) {
	transform: rotate(198deg) translate3d(100px, 0, 0);
}
i:nth-child(55)::before {
	animation-delay: 1.68367s;
}

i:nth-child(56) {
	transform: rotate(201.6deg) translate3d(100px, 0, 0);
}
i:nth-child(56)::before {
	animation-delay: 1.71429s;
}

i:nth-child(57) {
	transform: rotate(205.2deg) translate3d(100px, 0, 0);
}
i:nth-child(57)::before {
	animation-delay: 1.7449s;
}

i:nth-child(58) {
	transform: rotate(208.8deg) translate3d(100px, 0, 0);
}
i:nth-child(58)::before {
	animation-delay: 1.77551s;
}

i:nth-child(59) {
	transform: rotate(212.4deg) translate3d(100px, 0, 0);
}
i:nth-child(59)::before {
	animation-delay: 1.80612s;
}

i:nth-child(60) {
	transform: rotate(216deg) translate3d(100px, 0, 0);
}
i:nth-child(60)::before {
	animation-delay: 1.83673s;
}

i:nth-child(61) {
	transform: rotate(219.6deg) translate3d(100px, 0, 0);
}
i:nth-child(61)::before {
	animation-delay: 1.86735s;
}

i:nth-child(62) {
	transform: rotate(223.2deg) translate3d(100px, 0, 0);
}
i:nth-child(62)::before {
	animation-delay: 1.89796s;
}

i:nth-child(63) {
	transform: rotate(226.8deg) translate3d(100px, 0, 0);
}
i:nth-child(63)::before {
	animation-delay: 1.92857s;
}

i:nth-child(64) {
	transform: rotate(230.4deg) translate3d(100px, 0, 0);
}
i:nth-child(64)::before {
	animation-delay: 1.95918s;
}

i:nth-child(65) {
	transform: rotate(234deg) translate3d(100px, 0, 0);
}
i:nth-child(65)::before {
	animation-delay: 1.9898s;
}

i:nth-child(66) {
	transform: rotate(237.6deg) translate3d(100px, 0, 0);
}
i:nth-child(66)::before {
	animation-delay: 2.02041s;
}

i:nth-child(67) {
	transform: rotate(241.2deg) translate3d(100px, 0, 0);
}
i:nth-child(67)::before {
	animation-delay: 2.05102s;
}

i:nth-child(68) {
	transform: rotate(244.8deg) translate3d(100px, 0, 0);
}
i:nth-child(68)::before {
	animation-delay: 2.08163s;
}

i:nth-child(69) {
	transform: rotate(248.4deg) translate3d(100px, 0, 0);
}
i:nth-child(69)::before {
	animation-delay: 2.11224s;
}

i:nth-child(70) {
	transform: rotate(252deg) translate3d(100px, 0, 0);
}
i:nth-child(70)::before {
	animation-delay: 2.14286s;
}

i:nth-child(71) {
	transform: rotate(255.6deg) translate3d(100px, 0, 0);
}
i:nth-child(71)::before {
	animation-delay: 2.17347s;
}

i:nth-child(72) {
	transform: rotate(259.2deg) translate3d(100px, 0, 0);
}
i:nth-child(72)::before {
	animation-delay: 2.20408s;
}

i:nth-child(73) {
	transform: rotate(262.8deg) translate3d(100px, 0, 0);
}
i:nth-child(73)::before {
	animation-delay: 2.23469s;
}

i:nth-child(74) {
	transform: rotate(266.4deg) translate3d(100px, 0, 0);
}
i:nth-child(74)::before {
	animation-delay: 2.26531s;
}

i:nth-child(75) {
	transform: rotate(270deg) translate3d(100px, 0, 0);
}
i:nth-child(75)::before {
	animation-delay: 2.29592s;
}

i:nth-child(76) {
	transform: rotate(273.6deg) translate3d(100px, 0, 0);
}
i:nth-child(76)::before {
	animation-delay: 2.32653s;
}

i:nth-child(77) {
	transform: rotate(277.2deg) translate3d(100px, 0, 0);
}
i:nth-child(77)::before {
	animation-delay: 2.35714s;
}

i:nth-child(78) {
	transform: rotate(280.8deg) translate3d(100px, 0, 0);
}
i:nth-child(78)::before {
	animation-delay: 2.38776s;
}

i:nth-child(79) {
	transform: rotate(284.4deg) translate3d(100px, 0, 0);
}
i:nth-child(79)::before {
	animation-delay: 2.41837s;
}

i:nth-child(80) {
	transform: rotate(288deg) translate3d(100px, 0, 0);
}
i:nth-child(80)::before {
	animation-delay: 2.44898s;
}

i:nth-child(81) {
	transform: rotate(291.6deg) translate3d(100px, 0, 0);
}
i:nth-child(81)::before {
	animation-delay: 2.47959s;
}

i:nth-child(82) {
	transform: rotate(295.2deg) translate3d(100px, 0, 0);
}
i:nth-child(82)::before {
	animation-delay: 2.5102s;
}

i:nth-child(83) {
	transform: rotate(298.8deg) translate3d(100px, 0, 0);
}
i:nth-child(83)::before {
	animation-delay: 2.54082s;
}

i:nth-child(84) {
	transform: rotate(302.4deg) translate3d(100px, 0, 0);
}
i:nth-child(84)::before {
	animation-delay: 2.57143s;
}

i:nth-child(85) {
	transform: rotate(306deg) translate3d(100px, 0, 0);
}
i:nth-child(85)::before {
	animation-delay: 2.60204s;
}

i:nth-child(86) {
	transform: rotate(309.6deg) translate3d(100px, 0, 0);
}
i:nth-child(86)::before {
	animation-delay: 2.63265s;
}

i:nth-child(87) {
	transform: rotate(313.2deg) translate3d(100px, 0, 0);
}
i:nth-child(87)::before {
	animation-delay: 2.66327s;
}

i:nth-child(88) {
	transform: rotate(316.8deg) translate3d(100px, 0, 0);
}
i:nth-child(88)::before {
	animation-delay: 2.69388s;
}

i:nth-child(89) {
	transform: rotate(320.4deg) translate3d(100px, 0, 0);
}
i:nth-child(89)::before {
	animation-delay: 2.72449s;
}

i:nth-child(90) {
	transform: rotate(324deg) translate3d(100px, 0, 0);
}
i:nth-child(90)::before {
	animation-delay: 2.7551s;
}

i:nth-child(91) {
	transform: rotate(327.6deg) translate3d(100px, 0, 0);
}
i:nth-child(91)::before {
	animation-delay: 2.78571s;
}

i:nth-child(92) {
	transform: rotate(331.2deg) translate3d(100px, 0, 0);
}
i:nth-child(92)::before {
	animation-delay: 2.81633s;
}

i:nth-child(93) {
	transform: rotate(334.8deg) translate3d(100px, 0, 0);
}
i:nth-child(93)::before {
	animation-delay: 2.84694s;
}

i:nth-child(94) {
	transform: rotate(338.4deg) translate3d(100px, 0, 0);
}
i:nth-child(94)::before {
	animation-delay: 2.87755s;
}

i:nth-child(95) {
	transform: rotate(342deg) translate3d(100px, 0, 0);
}
i:nth-child(95)::before {
	animation-delay: 2.90816s;
}

i:nth-child(96) {
	transform: rotate(345.6deg) translate3d(100px, 0, 0);
}
i:nth-child(96)::before {
	animation-delay: 2.93878s;
}

i:nth-child(97) {
	transform: rotate(349.2deg) translate3d(100px, 0, 0);
}
i:nth-child(97)::before {
	animation-delay: 2.96939s;
}

i:nth-child(98) {
	transform: rotate(352.8deg) translate3d(100px, 0, 0);
}
i:nth-child(98)::before {
	animation-delay: 3s;
}

i:nth-child(99) {
	transform: rotate(356.4deg) translate3d(100px, 0, 0);
}
i:nth-child(99)::before {
	animation-delay: 3.03061s;
}

i:nth-child(100) {
	transform: rotate(360deg) translate3d(100px, 0, 0);
}
i:nth-child(100)::before {
	animation-delay: 3.06122s;
}

@keyframes spin {
	0% {transform: scale(1);
	}
	15% {transform: translate(-3px, -3px) scale(3);
	}
	50% {transform: scale(1);
	}
}
</style>
<div class="spinner">
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
</div>