Spinner

Developer

Size

3,072 Kb

Views

30,360

Spinner Previews
Spinner HTML Codes
Spinner CSS Codes

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 Previews

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

Home Page	Home
Developer	Massimo
Username	_massimo
Uploaded	September 17, 2022
Rating	4
Size	3,072 Kb
Views	30,360

Do you need developer help for Spinner?

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!

Massimo (_massimo) Script Codes

Name	Size
Run T-REX run in CSS	8,203 Kb
Css wave	3,157 Kb
Css tabs	3,169 Kb
Spinner	3,826 Kb
Whale pixel art animation	3,215 Kb
Pathfinder	5,360 Kb
Cat loader	3,899 Kb
Melting ice cream	3,839 Kb
Page Not Found	3,710 Kb
Pacman	2,503 Kb

Create amazing video scripts 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
Buttons with style	Chbymnky	2,082 Kb
TigerWoods Freecodecamp Page	Baileytj	2,869 Kb
Simple Linear Regression with Editable Table	Melatonind	3,264 Kb
Playing with FlexBox	_Billy_Brown	3,162 Kb
Loading animation - freedom purchase	Rocbear	2,567 Kb
The Rope	Chribbe	2,886 Kb
Simple Carousel Pure CSS	Dangvanthanh	4,080 Kb
Octopus Bar iPad App Interactions	Davidkpiano	6,735 Kb
Virtual vinyl	Davidpanik	3,474 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!