Spinner
How do I make an spinner?
Feel free to change size and color. What is a spinner? How do you make a spinner? This script and codes were developed by Massimo on 17 September 2022, Saturday.
Spinner - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>spinner</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="big"></div>
</div>
</body>
</html>
Spinner - Script Codes CSS Codes
@-webkit-keyframes spin { to { -webkit-transform: scale(0.5) rotate(45deg); -ms-transform: scale(0.5) rotate(45deg); transform: scale(0.5) rotate(45deg); }
}
@-moz-keyframes spin { to { -webkit-transform: scale(0.5) rotate(45deg); -ms-transform: scale(0.5) rotate(45deg); transform: scale(0.5) rotate(45deg); }
}
@-o-keyframes spin { to { -webkit-transform: scale(0.5) rotate(45deg); -ms-transform: scale(0.5) rotate(45deg); transform: scale(0.5) rotate(45deg); }
}
@keyframes spin { to { -webkit-transform: scale(0.5) rotate(45deg); -ms-transform: scale(0.5) rotate(45deg); transform: scale(0.5) rotate(45deg); }
}
body { margin: 0; overflow: hidden; background: #000;
}
body .container { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px -80px; -webkit-transform: scale(1) rotate(-45deg); -ms-transform: scale(1) rotate(-45deg); transform: scale(1) rotate(-45deg); -webkit-animation: spin 1200ms infinite linear; -moz-animation: spin 1200ms infinite linear; -o-animation: spin 1200ms infinite linear; animation: spin 1200ms infinite linear;
}
body .container .big { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; background: #fff; box-shadow: 0 0 0 1px #fff;
}
body .container .small { position: absolute; width: 25%; height: 25%; opacity: 0; background: #fff; box-shadow: 0 0 0 1px #fff;
}
body .container .small:nth-child(1) { left: 50%; top: 0; -webkit-animation: small1 1200ms infinite linear; -moz-animation: small1 1200ms infinite linear; -o-animation: small1 1200ms infinite linear; animation: small1 1200ms infinite linear;
}
@-webkit-keyframes small1 { 0%, 7.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small1 { 0%, 7.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small1 { 0%, 7.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small1 { 0%, 7.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
body .container .small:nth-child(2) { left: 25%; top: 0; -webkit-animation: small2 1200ms infinite linear; -moz-animation: small2 1200ms infinite linear; -o-animation: small2 1200ms infinite linear; animation: small2 1200ms infinite linear;
}
@-webkit-keyframes small2 { 0%, 15% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small2 { 0%, 15% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small2 { 0%, 15% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small2 { 0%, 15% { opacity: 0; } 95%, 100% { opacity: 1; }
}
body .container .small:nth-child(3) { left: 0; top: 0; -webkit-animation: small3 1200ms infinite linear; -moz-animation: small3 1200ms infinite linear; -o-animation: small3 1200ms infinite linear; animation: small3 1200ms infinite linear;
}
@-webkit-keyframes small3 { 0%, 22.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small3 { 0%, 22.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small3 { 0%, 22.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small3 { 0%, 22.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
body .container .small:nth-child(4) { left: 0; top: 25%; -webkit-animation: small4 1200ms infinite linear; -moz-animation: small4 1200ms infinite linear; -o-animation: small4 1200ms infinite linear; animation: small4 1200ms infinite linear;
}
@-webkit-keyframes small4 { 0%, 30% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small4 { 0%, 30% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small4 { 0%, 30% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small4 { 0%, 30% { opacity: 0; } 95%, 100% { opacity: 1; }
}
body .container .small:nth-child(5) { left: 0; top: 50%; -webkit-animation: small5 1200ms infinite linear; -moz-animation: small5 1200ms infinite linear; -o-animation: small5 1200ms infinite linear; animation: small5 1200ms infinite linear;
}
@-webkit-keyframes small5 { 0%, 37.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small5 { 0%, 37.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small5 { 0%, 37.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small5 { 0%, 37.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
body .container .small:nth-child(6) { left: 0; top: 75%; -webkit-animation: small6 1200ms infinite linear; -moz-animation: small6 1200ms infinite linear; -o-animation: small6 1200ms infinite linear; animation: small6 1200ms infinite linear;
}
@-webkit-keyframes small6 { 0%, 45% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small6 { 0%, 45% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small6 { 0%, 45% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small6 { 0%, 45% { opacity: 0; } 95%, 100% { opacity: 1; }
}
body .container .small:nth-child(7) { left: 25%; top: 75%; -webkit-animation: small7 1200ms infinite linear; -moz-animation: small7 1200ms infinite linear; -o-animation: small7 1200ms infinite linear; animation: small7 1200ms infinite linear;
}
@-webkit-keyframes small7 { 0%, 52.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small7 { 0%, 52.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small7 { 0%, 52.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small7 { 0%, 52.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
body .container .small:nth-child(8) { left: 50%; top: 75%; -webkit-animation: small8 1200ms infinite linear; -moz-animation: small8 1200ms infinite linear; -o-animation: small8 1200ms infinite linear; animation: small8 1200ms infinite linear;
}
@-webkit-keyframes small8 { 0%, 60% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small8 { 0%, 60% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small8 { 0%, 60% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small8 { 0%, 60% { opacity: 0; } 95%, 100% { opacity: 1; }
}
body .container .small:nth-child(9) { left: 75%; top: 75%; -webkit-animation: small9 1200ms infinite linear; -moz-animation: small9 1200ms infinite linear; -o-animation: small9 1200ms infinite linear; animation: small9 1200ms infinite linear;
}
@-webkit-keyframes small9 { 0%, 67.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small9 { 0%, 67.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small9 { 0%, 67.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small9 { 0%, 67.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
body .container .small:nth-child(10) { left: 75%; top: 50%; -webkit-animation: small10 1200ms infinite linear; -moz-animation: small10 1200ms infinite linear; -o-animation: small10 1200ms infinite linear; animation: small10 1200ms infinite linear;
}
@-webkit-keyframes small10 { 0%, 75% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small10 { 0%, 75% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small10 { 0%, 75% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small10 { 0%, 75% { opacity: 0; } 95%, 100% { opacity: 1; }
}
body .container .small:nth-child(11) { left: 75%; top: 25%; -webkit-animation: small11 1200ms infinite linear; -moz-animation: small11 1200ms infinite linear; -o-animation: small11 1200ms infinite linear; animation: small11 1200ms infinite linear;
}
@-webkit-keyframes small11 { 0%, 82.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small11 { 0%, 82.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small11 { 0%, 82.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small11 { 0%, 82.5% { opacity: 0; } 95%, 100% { opacity: 1; }
}
body .container .small:nth-child(12) { left: 75%; top: 0; -webkit-animation: small12 1200ms infinite linear; -moz-animation: small12 1200ms infinite linear; -o-animation: small12 1200ms infinite linear; animation: small12 1200ms infinite linear;
}
@-webkit-keyframes small12 { 0%, 90% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-moz-keyframes small12 { 0%, 90% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@-o-keyframes small12 { 0%, 90% { opacity: 0; } 95%, 100% { opacity: 1; }
}
@keyframes small12 { 0%, 90% { opacity: 0; } 95%, 100% { opacity: 1; }
}
Developer | Massimo |
Username | _massimo |
Uploaded | September 17, 2022 |
Rating | 4 |
Size | 3,072 Kb |
Views | 30,360 |
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!
Name | Size |
Css spirals | 5,074 Kb |
Mandala drawing concept | 3,474 Kb |
Shovel knight | 35,694 Kb |
Underwater particles | 3,401 Kb |
Bernard the polar bear | 4,070 Kb |
Css carousel | 2,977 Kb |
Record button | 4,905 Kb |
Run T-REX run in CSS | 8,203 Kb |
Cat loader | 3,899 Kb |
Page Not Found | 3,710 Kb |
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!
Name | Username | Size |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Twinkling Stars | Ripley6811 | 2,750 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
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!