CSS Spinner Animation

Developer

Size

5,951 Kb

Views

24,288

CSS Spinner Animation Previews
CSS Spinner Animation HTML Codes
CSS Spinner Animation CSS Codes
CSS Spinner Animation JS Codes

How do I make an css spinner animation?

What is a css spinner animation? How do you make a css spinner animation? This script and codes were developed by Hakim El Hattab on 24 September 2022, Saturday.

CSS Spinner Animation Previews

CSS Spinner Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Spinner Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { overflow: hidden; background: #111;
}
.spinner { position: absolute; top: 50%; left: 50%; z-index: 2; perspective: 200px;
}
i { display: block; position: absolute; opacity: 1;
}
i b { display: block; width: 6px; height: 6px; border-radius: 6px; background: white; box-shadow: 0px 0px 14px white; animation-name: spin; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
}
i:nth-child(1) { transform: rotate(3.6deg) translate3d(100px, 0, 0);
}
i:nth-child(1) b { animation-delay: 0.03061s;
}
i:nth-child(2) { transform: rotate(7.2deg) translate3d(100px, 0, 0);
}
i:nth-child(2) b { animation-delay: 0.06122s;
}
i:nth-child(3) { transform: rotate(10.8deg) translate3d(100px, 0, 0);
}
i:nth-child(3) b { animation-delay: 0.09184s;
}
i:nth-child(4) { transform: rotate(14.4deg) translate3d(100px, 0, 0);
}
i:nth-child(4) b { animation-delay: 0.12245s;
}
i:nth-child(5) { transform: rotate(18deg) translate3d(100px, 0, 0);
}
i:nth-child(5) b { animation-delay: 0.15306s;
}
i:nth-child(6) { transform: rotate(21.6deg) translate3d(100px, 0, 0);
}
i:nth-child(6) b { animation-delay: 0.18367s;
}
i:nth-child(7) { transform: rotate(25.2deg) translate3d(100px, 0, 0);
}
i:nth-child(7) b { animation-delay: 0.21429s;
}
i:nth-child(8) { transform: rotate(28.8deg) translate3d(100px, 0, 0);
}
i:nth-child(8) b { animation-delay: 0.2449s;
}
i:nth-child(9) { transform: rotate(32.4deg) translate3d(100px, 0, 0);
}
i:nth-child(9) b { animation-delay: 0.27551s;
}
i:nth-child(10) { transform: rotate(36deg) translate3d(100px, 0, 0);
}
i:nth-child(10) b { animation-delay: 0.30612s;
}
i:nth-child(11) { transform: rotate(39.6deg) translate3d(100px, 0, 0);
}
i:nth-child(11) b { animation-delay: 0.33673s;
}
i:nth-child(12) { transform: rotate(43.2deg) translate3d(100px, 0, 0);
}
i:nth-child(12) b { animation-delay: 0.36735s;
}
i:nth-child(13) { transform: rotate(46.8deg) translate3d(100px, 0, 0);
}
i:nth-child(13) b { animation-delay: 0.39796s;
}
i:nth-child(14) { transform: rotate(50.4deg) translate3d(100px, 0, 0);
}
i:nth-child(14) b { animation-delay: 0.42857s;
}
i:nth-child(15) { transform: rotate(54deg) translate3d(100px, 0, 0);
}
i:nth-child(15) b { animation-delay: 0.45918s;
}
i:nth-child(16) { transform: rotate(57.6deg) translate3d(100px, 0, 0);
}
i:nth-child(16) b { animation-delay: 0.4898s;
}
i:nth-child(17) { transform: rotate(61.2deg) translate3d(100px, 0, 0);
}
i:nth-child(17) b { animation-delay: 0.52041s;
}
i:nth-child(18) { transform: rotate(64.8deg) translate3d(100px, 0, 0);
}
i:nth-child(18) b { animation-delay: 0.55102s;
}
i:nth-child(19) { transform: rotate(68.4deg) translate3d(100px, 0, 0);
}
i:nth-child(19) b { animation-delay: 0.58163s;
}
i:nth-child(20) { transform: rotate(72deg) translate3d(100px, 0, 0);
}
i:nth-child(20) b { animation-delay: 0.61224s;
}
i:nth-child(21) { transform: rotate(75.6deg) translate3d(100px, 0, 0);
}
i:nth-child(21) b { animation-delay: 0.64286s;
}
i:nth-child(22) { transform: rotate(79.2deg) translate3d(100px, 0, 0);
}
i:nth-child(22) b { animation-delay: 0.67347s;
}
i:nth-child(23) { transform: rotate(82.8deg) translate3d(100px, 0, 0);
}
i:nth-child(23) b { animation-delay: 0.70408s;
}
i:nth-child(24) { transform: rotate(86.4deg) translate3d(100px, 0, 0);
}
i:nth-child(24) b { animation-delay: 0.73469s;
}
i:nth-child(25) { transform: rotate(90deg) translate3d(100px, 0, 0);
}
i:nth-child(25) b { animation-delay: 0.76531s;
}
i:nth-child(26) { transform: rotate(93.6deg) translate3d(100px, 0, 0);
}
i:nth-child(26) b { animation-delay: 0.79592s;
}
i:nth-child(27) { transform: rotate(97.2deg) translate3d(100px, 0, 0);
}
i:nth-child(27) b { animation-delay: 0.82653s;
}
i:nth-child(28) { transform: rotate(100.8deg) translate3d(100px, 0, 0);
}
i:nth-child(28) b { animation-delay: 0.85714s;
}
i:nth-child(29) { transform: rotate(104.4deg) translate3d(100px, 0, 0);
}
i:nth-child(29) b { animation-delay: 0.88776s;
}
i:nth-child(30) { transform: rotate(108deg) translate3d(100px, 0, 0);
}
i:nth-child(30) b { animation-delay: 0.91837s;
}
i:nth-child(31) { transform: rotate(111.6deg) translate3d(100px, 0, 0);
}
i:nth-child(31) b { animation-delay: 0.94898s;
}
i:nth-child(32) { transform: rotate(115.2deg) translate3d(100px, 0, 0);
}
i:nth-child(32) b { animation-delay: 0.97959s;
}
i:nth-child(33) { transform: rotate(118.8deg) translate3d(100px, 0, 0);
}
i:nth-child(33) b { animation-delay: 1.0102s;
}
i:nth-child(34) { transform: rotate(122.4deg) translate3d(100px, 0, 0);
}
i:nth-child(34) b { animation-delay: 1.04082s;
}
i:nth-child(35) { transform: rotate(126deg) translate3d(100px, 0, 0);
}
i:nth-child(35) b { animation-delay: 1.07143s;
}
i:nth-child(36) { transform: rotate(129.6deg) translate3d(100px, 0, 0);
}
i:nth-child(36) b { animation-delay: 1.10204s;
}
i:nth-child(37) { transform: rotate(133.2deg) translate3d(100px, 0, 0);
}
i:nth-child(37) b { animation-delay: 1.13265s;
}
i:nth-child(38) { transform: rotate(136.8deg) translate3d(100px, 0, 0);
}
i:nth-child(38) b { animation-delay: 1.16327s;
}
i:nth-child(39) { transform: rotate(140.4deg) translate3d(100px, 0, 0);
}
i:nth-child(39) b { animation-delay: 1.19388s;
}
i:nth-child(40) { transform: rotate(144deg) translate3d(100px, 0, 0);
}
i:nth-child(40) b { animation-delay: 1.22449s;
}
i:nth-child(41) { transform: rotate(147.6deg) translate3d(100px, 0, 0);
}
i:nth-child(41) b { animation-delay: 1.2551s;
}
i:nth-child(42) { transform: rotate(151.2deg) translate3d(100px, 0, 0);
}
i:nth-child(42) b { animation-delay: 1.28571s;
}
i:nth-child(43) { transform: rotate(154.8deg) translate3d(100px, 0, 0);
}
i:nth-child(43) b { animation-delay: 1.31633s;
}
i:nth-child(44) { transform: rotate(158.4deg) translate3d(100px, 0, 0);
}
i:nth-child(44) b { animation-delay: 1.34694s;
}
i:nth-child(45) { transform: rotate(162deg) translate3d(100px, 0, 0);
}
i:nth-child(45) b { animation-delay: 1.37755s;
}
i:nth-child(46) { transform: rotate(165.6deg) translate3d(100px, 0, 0);
}
i:nth-child(46) b { animation-delay: 1.40816s;
}
i:nth-child(47) { transform: rotate(169.2deg) translate3d(100px, 0, 0);
}
i:nth-child(47) b { animation-delay: 1.43878s;
}
i:nth-child(48) { transform: rotate(172.8deg) translate3d(100px, 0, 0);
}
i:nth-child(48) b { animation-delay: 1.46939s;
}
i:nth-child(49) { transform: rotate(176.4deg) translate3d(100px, 0, 0);
}
i:nth-child(49) b { animation-delay: 1.5s;
}
i:nth-child(50) { transform: rotate(180deg) translate3d(100px, 0, 0);
}
i:nth-child(50) b { animation-delay: 1.53061s;
}
i:nth-child(51) { transform: rotate(183.6deg) translate3d(100px, 0, 0);
}
i:nth-child(51) b { animation-delay: 1.56122s;
}
i:nth-child(52) { transform: rotate(187.2deg) translate3d(100px, 0, 0);
}
i:nth-child(52) b { animation-delay: 1.59184s;
}
i:nth-child(53) { transform: rotate(190.8deg) translate3d(100px, 0, 0);
}
i:nth-child(53) b { animation-delay: 1.62245s;
}
i:nth-child(54) { transform: rotate(194.4deg) translate3d(100px, 0, 0);
}
i:nth-child(54) b { animation-delay: 1.65306s;
}
i:nth-child(55) { transform: rotate(198deg) translate3d(100px, 0, 0);
}
i:nth-child(55) b { animation-delay: 1.68367s;
}
i:nth-child(56) { transform: rotate(201.6deg) translate3d(100px, 0, 0);
}
i:nth-child(56) b { animation-delay: 1.71429s;
}
i:nth-child(57) { transform: rotate(205.2deg) translate3d(100px, 0, 0);
}
i:nth-child(57) b { animation-delay: 1.7449s;
}
i:nth-child(58) { transform: rotate(208.8deg) translate3d(100px, 0, 0);
}
i:nth-child(58) b { animation-delay: 1.77551s;
}
i:nth-child(59) { transform: rotate(212.4deg) translate3d(100px, 0, 0);
}
i:nth-child(59) b { animation-delay: 1.80612s;
}
i:nth-child(60) { transform: rotate(216deg) translate3d(100px, 0, 0);
}
i:nth-child(60) b { animation-delay: 1.83673s;
}
i:nth-child(61) { transform: rotate(219.6deg) translate3d(100px, 0, 0);
}
i:nth-child(61) b { animation-delay: 1.86735s;
}
i:nth-child(62) { transform: rotate(223.2deg) translate3d(100px, 0, 0);
}
i:nth-child(62) b { animation-delay: 1.89796s;
}
i:nth-child(63) { transform: rotate(226.8deg) translate3d(100px, 0, 0);
}
i:nth-child(63) b { animation-delay: 1.92857s;
}
i:nth-child(64) { transform: rotate(230.4deg) translate3d(100px, 0, 0);
}
i:nth-child(64) b { animation-delay: 1.95918s;
}
i:nth-child(65) { transform: rotate(234deg) translate3d(100px, 0, 0);
}
i:nth-child(65) b { animation-delay: 1.9898s;
}
i:nth-child(66) { transform: rotate(237.6deg) translate3d(100px, 0, 0);
}
i:nth-child(66) b { animation-delay: 2.02041s;
}
i:nth-child(67) { transform: rotate(241.2deg) translate3d(100px, 0, 0);
}
i:nth-child(67) b { animation-delay: 2.05102s;
}
i:nth-child(68) { transform: rotate(244.8deg) translate3d(100px, 0, 0);
}
i:nth-child(68) b { animation-delay: 2.08163s;
}
i:nth-child(69) { transform: rotate(248.4deg) translate3d(100px, 0, 0);
}
i:nth-child(69) b { animation-delay: 2.11224s;
}
i:nth-child(70) { transform: rotate(252deg) translate3d(100px, 0, 0);
}
i:nth-child(70) b { animation-delay: 2.14286s;
}
i:nth-child(71) { transform: rotate(255.6deg) translate3d(100px, 0, 0);
}
i:nth-child(71) b { animation-delay: 2.17347s;
}
i:nth-child(72) { transform: rotate(259.2deg) translate3d(100px, 0, 0);
}
i:nth-child(72) b { animation-delay: 2.20408s;
}
i:nth-child(73) { transform: rotate(262.8deg) translate3d(100px, 0, 0);
}
i:nth-child(73) b { animation-delay: 2.23469s;
}
i:nth-child(74) { transform: rotate(266.4deg) translate3d(100px, 0, 0);
}
i:nth-child(74) b { animation-delay: 2.26531s;
}
i:nth-child(75) { transform: rotate(270deg) translate3d(100px, 0, 0);
}
i:nth-child(75) b { animation-delay: 2.29592s;
}
i:nth-child(76) { transform: rotate(273.6deg) translate3d(100px, 0, 0);
}
i:nth-child(76) b { animation-delay: 2.32653s;
}
i:nth-child(77) { transform: rotate(277.2deg) translate3d(100px, 0, 0);
}
i:nth-child(77) b { animation-delay: 2.35714s;
}
i:nth-child(78) { transform: rotate(280.8deg) translate3d(100px, 0, 0);
}
i:nth-child(78) b { animation-delay: 2.38776s;
}
i:nth-child(79) { transform: rotate(284.4deg) translate3d(100px, 0, 0);
}
i:nth-child(79) b { animation-delay: 2.41837s;
}
i:nth-child(80) { transform: rotate(288deg) translate3d(100px, 0, 0);
}
i:nth-child(80) b { animation-delay: 2.44898s;
}
i:nth-child(81) { transform: rotate(291.6deg) translate3d(100px, 0, 0);
}
i:nth-child(81) b { animation-delay: 2.47959s;
}
i:nth-child(82) { transform: rotate(295.2deg) translate3d(100px, 0, 0);
}
i:nth-child(82) b { animation-delay: 2.5102s;
}
i:nth-child(83) { transform: rotate(298.8deg) translate3d(100px, 0, 0);
}
i:nth-child(83) b { animation-delay: 2.54082s;
}
i:nth-child(84) { transform: rotate(302.4deg) translate3d(100px, 0, 0);
}
i:nth-child(84) b { animation-delay: 2.57143s;
}
i:nth-child(85) { transform: rotate(306deg) translate3d(100px, 0, 0);
}
i:nth-child(85) b { animation-delay: 2.60204s;
}
i:nth-child(86) { transform: rotate(309.6deg) translate3d(100px, 0, 0);
}
i:nth-child(86) b { animation-delay: 2.63265s;
}
i:nth-child(87) { transform: rotate(313.2deg) translate3d(100px, 0, 0);
}
i:nth-child(87) b { animation-delay: 2.66327s;
}
i:nth-child(88) { transform: rotate(316.8deg) translate3d(100px, 0, 0);
}
i:nth-child(88) b { animation-delay: 2.69388s;
}
i:nth-child(89) { transform: rotate(320.4deg) translate3d(100px, 0, 0);
}
i:nth-child(89) b { animation-delay: 2.72449s;
}
i:nth-child(90) { transform: rotate(324deg) translate3d(100px, 0, 0);
}
i:nth-child(90) b { animation-delay: 2.7551s;
}
i:nth-child(91) { transform: rotate(327.6deg) translate3d(100px, 0, 0);
}
i:nth-child(91) b { animation-delay: 2.78571s;
}
i:nth-child(92) { transform: rotate(331.2deg) translate3d(100px, 0, 0);
}
i:nth-child(92) b { animation-delay: 2.81633s;
}
i:nth-child(93) { transform: rotate(334.8deg) translate3d(100px, 0, 0);
}
i:nth-child(93) b { animation-delay: 2.84694s;
}
i:nth-child(94) { transform: rotate(338.4deg) translate3d(100px, 0, 0);
}
i:nth-child(94) b { animation-delay: 2.87755s;
}
i:nth-child(95) { transform: rotate(342deg) translate3d(100px, 0, 0);
}
i:nth-child(95) b { animation-delay: 2.90816s;
}
i:nth-child(96) { transform: rotate(345.6deg) translate3d(100px, 0, 0);
}
i:nth-child(96) b { animation-delay: 2.93878s;
}
i:nth-child(97) { transform: rotate(349.2deg) translate3d(100px, 0, 0);
}
i:nth-child(97) b { animation-delay: 2.96939s;
}
i:nth-child(98) { transform: rotate(352.8deg) translate3d(100px, 0, 0);
}
i:nth-child(98) b { animation-delay: 3s;
}
i:nth-child(99) { transform: rotate(356.4deg) translate3d(100px, 0, 0);
}
i:nth-child(99) b { animation-delay: 3.03061s;
}
i:nth-child(100) { transform: rotate(360deg) translate3d(100px, 0, 0);
}
i:nth-child(100) b { animation-delay: 3.06122s;
}
@keyframes spin { 0% { transform: scale(1); } 15% { transform: translate(-3px, -3px) scale(3); } 50% { transform: scale(1); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='spinner'> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i> <i> <b></b> </i>
</div> <script src="js/index.js"></script>
</body>
</html>

CSS Spinner Animation - Script Codes CSS Codes

html, body { overflow: hidden; background: #111;
}
.spinner { position: absolute; top: 50%; left: 50%; z-index: 2; perspective: 200px;
}
i { display: block; position: absolute; opacity: 1;
}
i b { display: block; width: 6px; height: 6px; border-radius: 6px; background: white; box-shadow: 0px 0px 14px white; animation-name: spin; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
}
i:nth-child(1) { transform: rotate(3.6deg) translate3d(100px, 0, 0);
}
i:nth-child(1) b { animation-delay: 0.03061s;
}
i:nth-child(2) { transform: rotate(7.2deg) translate3d(100px, 0, 0);
}
i:nth-child(2) b { animation-delay: 0.06122s;
}
i:nth-child(3) { transform: rotate(10.8deg) translate3d(100px, 0, 0);
}
i:nth-child(3) b { animation-delay: 0.09184s;
}
i:nth-child(4) { transform: rotate(14.4deg) translate3d(100px, 0, 0);
}
i:nth-child(4) b { animation-delay: 0.12245s;
}
i:nth-child(5) { transform: rotate(18deg) translate3d(100px, 0, 0);
}
i:nth-child(5) b { animation-delay: 0.15306s;
}
i:nth-child(6) { transform: rotate(21.6deg) translate3d(100px, 0, 0);
}
i:nth-child(6) b { animation-delay: 0.18367s;
}
i:nth-child(7) { transform: rotate(25.2deg) translate3d(100px, 0, 0);
}
i:nth-child(7) b { animation-delay: 0.21429s;
}
i:nth-child(8) { transform: rotate(28.8deg) translate3d(100px, 0, 0);
}
i:nth-child(8) b { animation-delay: 0.2449s;
}
i:nth-child(9) { transform: rotate(32.4deg) translate3d(100px, 0, 0);
}
i:nth-child(9) b { animation-delay: 0.27551s;
}
i:nth-child(10) { transform: rotate(36deg) translate3d(100px, 0, 0);
}
i:nth-child(10) b { animation-delay: 0.30612s;
}
i:nth-child(11) { transform: rotate(39.6deg) translate3d(100px, 0, 0);
}
i:nth-child(11) b { animation-delay: 0.33673s;
}
i:nth-child(12) { transform: rotate(43.2deg) translate3d(100px, 0, 0);
}
i:nth-child(12) b { animation-delay: 0.36735s;
}
i:nth-child(13) { transform: rotate(46.8deg) translate3d(100px, 0, 0);
}
i:nth-child(13) b { animation-delay: 0.39796s;
}
i:nth-child(14) { transform: rotate(50.4deg) translate3d(100px, 0, 0);
}
i:nth-child(14) b { animation-delay: 0.42857s;
}
i:nth-child(15) { transform: rotate(54deg) translate3d(100px, 0, 0);
}
i:nth-child(15) b { animation-delay: 0.45918s;
}
i:nth-child(16) { transform: rotate(57.6deg) translate3d(100px, 0, 0);
}
i:nth-child(16) b { animation-delay: 0.4898s;
}
i:nth-child(17) { transform: rotate(61.2deg) translate3d(100px, 0, 0);
}
i:nth-child(17) b { animation-delay: 0.52041s;
}
i:nth-child(18) { transform: rotate(64.8deg) translate3d(100px, 0, 0);
}
i:nth-child(18) b { animation-delay: 0.55102s;
}
i:nth-child(19) { transform: rotate(68.4deg) translate3d(100px, 0, 0);
}
i:nth-child(19) b { animation-delay: 0.58163s;
}
i:nth-child(20) { transform: rotate(72deg) translate3d(100px, 0, 0);
}
i:nth-child(20) b { animation-delay: 0.61224s;
}
i:nth-child(21) { transform: rotate(75.6deg) translate3d(100px, 0, 0);
}
i:nth-child(21) b { animation-delay: 0.64286s;
}
i:nth-child(22) { transform: rotate(79.2deg) translate3d(100px, 0, 0);
}
i:nth-child(22) b { animation-delay: 0.67347s;
}
i:nth-child(23) { transform: rotate(82.8deg) translate3d(100px, 0, 0);
}
i:nth-child(23) b { animation-delay: 0.70408s;
}
i:nth-child(24) { transform: rotate(86.4deg) translate3d(100px, 0, 0);
}
i:nth-child(24) b { animation-delay: 0.73469s;
}
i:nth-child(25) { transform: rotate(90deg) translate3d(100px, 0, 0);
}
i:nth-child(25) b { animation-delay: 0.76531s;
}
i:nth-child(26) { transform: rotate(93.6deg) translate3d(100px, 0, 0);
}
i:nth-child(26) b { animation-delay: 0.79592s;
}
i:nth-child(27) { transform: rotate(97.2deg) translate3d(100px, 0, 0);
}
i:nth-child(27) b { animation-delay: 0.82653s;
}
i:nth-child(28) { transform: rotate(100.8deg) translate3d(100px, 0, 0);
}
i:nth-child(28) b { animation-delay: 0.85714s;
}
i:nth-child(29) { transform: rotate(104.4deg) translate3d(100px, 0, 0);
}
i:nth-child(29) b { animation-delay: 0.88776s;
}
i:nth-child(30) { transform: rotate(108deg) translate3d(100px, 0, 0);
}
i:nth-child(30) b { animation-delay: 0.91837s;
}
i:nth-child(31) { transform: rotate(111.6deg) translate3d(100px, 0, 0);
}
i:nth-child(31) b { animation-delay: 0.94898s;
}
i:nth-child(32) { transform: rotate(115.2deg) translate3d(100px, 0, 0);
}
i:nth-child(32) b { animation-delay: 0.97959s;
}
i:nth-child(33) { transform: rotate(118.8deg) translate3d(100px, 0, 0);
}
i:nth-child(33) b { animation-delay: 1.0102s;
}
i:nth-child(34) { transform: rotate(122.4deg) translate3d(100px, 0, 0);
}
i:nth-child(34) b { animation-delay: 1.04082s;
}
i:nth-child(35) { transform: rotate(126deg) translate3d(100px, 0, 0);
}
i:nth-child(35) b { animation-delay: 1.07143s;
}
i:nth-child(36) { transform: rotate(129.6deg) translate3d(100px, 0, 0);
}
i:nth-child(36) b { animation-delay: 1.10204s;
}
i:nth-child(37) { transform: rotate(133.2deg) translate3d(100px, 0, 0);
}
i:nth-child(37) b { animation-delay: 1.13265s;
}
i:nth-child(38) { transform: rotate(136.8deg) translate3d(100px, 0, 0);
}
i:nth-child(38) b { animation-delay: 1.16327s;
}
i:nth-child(39) { transform: rotate(140.4deg) translate3d(100px, 0, 0);
}
i:nth-child(39) b { animation-delay: 1.19388s;
}
i:nth-child(40) { transform: rotate(144deg) translate3d(100px, 0, 0);
}
i:nth-child(40) b { animation-delay: 1.22449s;
}
i:nth-child(41) { transform: rotate(147.6deg) translate3d(100px, 0, 0);
}
i:nth-child(41) b { animation-delay: 1.2551s;
}
i:nth-child(42) { transform: rotate(151.2deg) translate3d(100px, 0, 0);
}
i:nth-child(42) b { animation-delay: 1.28571s;
}
i:nth-child(43) { transform: rotate(154.8deg) translate3d(100px, 0, 0);
}
i:nth-child(43) b { animation-delay: 1.31633s;
}
i:nth-child(44) { transform: rotate(158.4deg) translate3d(100px, 0, 0);
}
i:nth-child(44) b { animation-delay: 1.34694s;
}
i:nth-child(45) { transform: rotate(162deg) translate3d(100px, 0, 0);
}
i:nth-child(45) b { animation-delay: 1.37755s;
}
i:nth-child(46) { transform: rotate(165.6deg) translate3d(100px, 0, 0);
}
i:nth-child(46) b { animation-delay: 1.40816s;
}
i:nth-child(47) { transform: rotate(169.2deg) translate3d(100px, 0, 0);
}
i:nth-child(47) b { animation-delay: 1.43878s;
}
i:nth-child(48) { transform: rotate(172.8deg) translate3d(100px, 0, 0);
}
i:nth-child(48) b { animation-delay: 1.46939s;
}
i:nth-child(49) { transform: rotate(176.4deg) translate3d(100px, 0, 0);
}
i:nth-child(49) b { animation-delay: 1.5s;
}
i:nth-child(50) { transform: rotate(180deg) translate3d(100px, 0, 0);
}
i:nth-child(50) b { animation-delay: 1.53061s;
}
i:nth-child(51) { transform: rotate(183.6deg) translate3d(100px, 0, 0);
}
i:nth-child(51) b { animation-delay: 1.56122s;
}
i:nth-child(52) { transform: rotate(187.2deg) translate3d(100px, 0, 0);
}
i:nth-child(52) b { animation-delay: 1.59184s;
}
i:nth-child(53) { transform: rotate(190.8deg) translate3d(100px, 0, 0);
}
i:nth-child(53) b { animation-delay: 1.62245s;
}
i:nth-child(54) { transform: rotate(194.4deg) translate3d(100px, 0, 0);
}
i:nth-child(54) b { animation-delay: 1.65306s;
}
i:nth-child(55) { transform: rotate(198deg) translate3d(100px, 0, 0);
}
i:nth-child(55) b { animation-delay: 1.68367s;
}
i:nth-child(56) { transform: rotate(201.6deg) translate3d(100px, 0, 0);
}
i:nth-child(56) b { animation-delay: 1.71429s;
}
i:nth-child(57) { transform: rotate(205.2deg) translate3d(100px, 0, 0);
}
i:nth-child(57) b { animation-delay: 1.7449s;
}
i:nth-child(58) { transform: rotate(208.8deg) translate3d(100px, 0, 0);
}
i:nth-child(58) b { animation-delay: 1.77551s;
}
i:nth-child(59) { transform: rotate(212.4deg) translate3d(100px, 0, 0);
}
i:nth-child(59) b { animation-delay: 1.80612s;
}
i:nth-child(60) { transform: rotate(216deg) translate3d(100px, 0, 0);
}
i:nth-child(60) b { animation-delay: 1.83673s;
}
i:nth-child(61) { transform: rotate(219.6deg) translate3d(100px, 0, 0);
}
i:nth-child(61) b { animation-delay: 1.86735s;
}
i:nth-child(62) { transform: rotate(223.2deg) translate3d(100px, 0, 0);
}
i:nth-child(62) b { animation-delay: 1.89796s;
}
i:nth-child(63) { transform: rotate(226.8deg) translate3d(100px, 0, 0);
}
i:nth-child(63) b { animation-delay: 1.92857s;
}
i:nth-child(64) { transform: rotate(230.4deg) translate3d(100px, 0, 0);
}
i:nth-child(64) b { animation-delay: 1.95918s;
}
i:nth-child(65) { transform: rotate(234deg) translate3d(100px, 0, 0);
}
i:nth-child(65) b { animation-delay: 1.9898s;
}
i:nth-child(66) { transform: rotate(237.6deg) translate3d(100px, 0, 0);
}
i:nth-child(66) b { animation-delay: 2.02041s;
}
i:nth-child(67) { transform: rotate(241.2deg) translate3d(100px, 0, 0);
}
i:nth-child(67) b { animation-delay: 2.05102s;
}
i:nth-child(68) { transform: rotate(244.8deg) translate3d(100px, 0, 0);
}
i:nth-child(68) b { animation-delay: 2.08163s;
}
i:nth-child(69) { transform: rotate(248.4deg) translate3d(100px, 0, 0);
}
i:nth-child(69) b { animation-delay: 2.11224s;
}
i:nth-child(70) { transform: rotate(252deg) translate3d(100px, 0, 0);
}
i:nth-child(70) b { animation-delay: 2.14286s;
}
i:nth-child(71) { transform: rotate(255.6deg) translate3d(100px, 0, 0);
}
i:nth-child(71) b { animation-delay: 2.17347s;
}
i:nth-child(72) { transform: rotate(259.2deg) translate3d(100px, 0, 0);
}
i:nth-child(72) b { animation-delay: 2.20408s;
}
i:nth-child(73) { transform: rotate(262.8deg) translate3d(100px, 0, 0);
}
i:nth-child(73) b { animation-delay: 2.23469s;
}
i:nth-child(74) { transform: rotate(266.4deg) translate3d(100px, 0, 0);
}
i:nth-child(74) b { animation-delay: 2.26531s;
}
i:nth-child(75) { transform: rotate(270deg) translate3d(100px, 0, 0);
}
i:nth-child(75) b { animation-delay: 2.29592s;
}
i:nth-child(76) { transform: rotate(273.6deg) translate3d(100px, 0, 0);
}
i:nth-child(76) b { animation-delay: 2.32653s;
}
i:nth-child(77) { transform: rotate(277.2deg) translate3d(100px, 0, 0);
}
i:nth-child(77) b { animation-delay: 2.35714s;
}
i:nth-child(78) { transform: rotate(280.8deg) translate3d(100px, 0, 0);
}
i:nth-child(78) b { animation-delay: 2.38776s;
}
i:nth-child(79) { transform: rotate(284.4deg) translate3d(100px, 0, 0);
}
i:nth-child(79) b { animation-delay: 2.41837s;
}
i:nth-child(80) { transform: rotate(288deg) translate3d(100px, 0, 0);
}
i:nth-child(80) b { animation-delay: 2.44898s;
}
i:nth-child(81) { transform: rotate(291.6deg) translate3d(100px, 0, 0);
}
i:nth-child(81) b { animation-delay: 2.47959s;
}
i:nth-child(82) { transform: rotate(295.2deg) translate3d(100px, 0, 0);
}
i:nth-child(82) b { animation-delay: 2.5102s;
}
i:nth-child(83) { transform: rotate(298.8deg) translate3d(100px, 0, 0);
}
i:nth-child(83) b { animation-delay: 2.54082s;
}
i:nth-child(84) { transform: rotate(302.4deg) translate3d(100px, 0, 0);
}
i:nth-child(84) b { animation-delay: 2.57143s;
}
i:nth-child(85) { transform: rotate(306deg) translate3d(100px, 0, 0);
}
i:nth-child(85) b { animation-delay: 2.60204s;
}
i:nth-child(86) { transform: rotate(309.6deg) translate3d(100px, 0, 0);
}
i:nth-child(86) b { animation-delay: 2.63265s;
}
i:nth-child(87) { transform: rotate(313.2deg) translate3d(100px, 0, 0);
}
i:nth-child(87) b { animation-delay: 2.66327s;
}
i:nth-child(88) { transform: rotate(316.8deg) translate3d(100px, 0, 0);
}
i:nth-child(88) b { animation-delay: 2.69388s;
}
i:nth-child(89) { transform: rotate(320.4deg) translate3d(100px, 0, 0);
}
i:nth-child(89) b { animation-delay: 2.72449s;
}
i:nth-child(90) { transform: rotate(324deg) translate3d(100px, 0, 0);
}
i:nth-child(90) b { animation-delay: 2.7551s;
}
i:nth-child(91) { transform: rotate(327.6deg) translate3d(100px, 0, 0);
}
i:nth-child(91) b { animation-delay: 2.78571s;
}
i:nth-child(92) { transform: rotate(331.2deg) translate3d(100px, 0, 0);
}
i:nth-child(92) b { animation-delay: 2.81633s;
}
i:nth-child(93) { transform: rotate(334.8deg) translate3d(100px, 0, 0);
}
i:nth-child(93) b { animation-delay: 2.84694s;
}
i:nth-child(94) { transform: rotate(338.4deg) translate3d(100px, 0, 0);
}
i:nth-child(94) b { animation-delay: 2.87755s;
}
i:nth-child(95) { transform: rotate(342deg) translate3d(100px, 0, 0);
}
i:nth-child(95) b { animation-delay: 2.90816s;
}
i:nth-child(96) { transform: rotate(345.6deg) translate3d(100px, 0, 0);
}
i:nth-child(96) b { animation-delay: 2.93878s;
}
i:nth-child(97) { transform: rotate(349.2deg) translate3d(100px, 0, 0);
}
i:nth-child(97) b { animation-delay: 2.96939s;
}
i:nth-child(98) { transform: rotate(352.8deg) translate3d(100px, 0, 0);
}
i:nth-child(98) b { animation-delay: 3s;
}
i:nth-child(99) { transform: rotate(356.4deg) translate3d(100px, 0, 0);
}
i:nth-child(99) b { animation-delay: 3.03061s;
}
i:nth-child(100) { transform: rotate(360deg) translate3d(100px, 0, 0);
}
i:nth-child(100) b { animation-delay: 3.06122s;
}
@keyframes spin { 0% { transform: scale(1); } 15% { transform: translate(-3px, -3px) scale(3); } 50% { transform: scale(1); }
}

CSS Spinner Animation - Script Codes JS Codes

// Another spinner animation.
// Not practical since it uses a ton of DOM elements, but it looks pretty :)
// by Hakim El Hattab | @hakimel

Home Page	Home
Developer	Hakim El Hattab
Username	hakimel
Uploaded	September 24, 2022
Rating	4.5
Size	5,951 Kb
Views	24,288

Do you need developer help for CSS Spinner Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hakim El Hattab (hakimel) Script Codes

Name	Size
404	3,893 Kb
Fokus	5,169 Kb
Animated Line Chart	3,305 Kb
DOM Tree	3,349 Kb
Magnetic	4,103 Kb
Kontext	4,490 Kb
CSS Wiggle	3,233 Kb
Trail	2,883 Kb
Hypnos	2,937 Kb
Flipside	4,297 Kb

Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
AngularJS Skills	Supro	3,312 Kb
Using Flickr API	MoyArt	6,761 Kb
Javascript Welcome	Peterlewicki	1,573 Kb
3D-box	Parthviroja	2,346 Kb
Table Exercise	Fresco	9,585 Kb
Pruebas de d3.js	Juanmanuelcarnerero	2,485 Kb
Shape Outside - Polygon	Stacy	3,954 Kb
HTML5 Video Autoplay	Zivcos	1,352 Kb
JS Beispiel getElementsByClassName 3	HSZG-Frontend-Kurs	1,988 Kb
Gradients	Karpovsystems	2,394 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!