Spinner

Developer

Size

3,826 Kb

Views

38,456

Spinner Previews
Spinner HTML Codes
Spinner CSS Codes

How do I make an spinner?

Was created using box-shadow. 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="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</body>
</html>

Spinner - Script Codes CSS Codes

.round, body .circle, body .circle:after { position: absolute; left: 50%; top: 50%; border-radius: 50%;
}
body { background: #267e94; overflow: hidden;
}
body .circle:after { content: ''; width: 9px; height: 9px; margin: -4.5px -4.5px;
}
@-webkit-keyframes spin1 { to { -webkit-transform: rotate(9turn); -ms-transform: rotate(9turn); transform: rotate(9turn); }
}
@-moz-keyframes spin1 { to { -webkit-transform: rotate(9turn); -ms-transform: rotate(9turn); transform: rotate(9turn); }
}
@-o-keyframes spin1 { to { -webkit-transform: rotate(9turn); -ms-transform: rotate(9turn); transform: rotate(9turn); }
}
@keyframes spin1 { to { -webkit-transform: rotate(9turn); -ms-transform: rotate(9turn); transform: rotate(9turn); }
}
body .circle:nth-child(1) { width: 27px; height: 27px; margin: -13.5px -13.5px; -webkit-animation: spin1 8s infinite linear; -moz-animation: spin1 8s infinite linear; -o-animation: spin1 8s infinite linear; animation: spin1 8s infinite linear;
}
body .circle:nth-child(1):after { box-shadow: 0px 13.5px #fff, -13.5px 0px #fff, 0px -13.5px #fff, 13.5px 0px #fff;
}
@-webkit-keyframes spin2 { to { -webkit-transform: rotate(8turn); -ms-transform: rotate(8turn); transform: rotate(8turn); }
}
@-moz-keyframes spin2 { to { -webkit-transform: rotate(8turn); -ms-transform: rotate(8turn); transform: rotate(8turn); }
}
@-o-keyframes spin2 { to { -webkit-transform: rotate(8turn); -ms-transform: rotate(8turn); transform: rotate(8turn); }
}
@keyframes spin2 { to { -webkit-transform: rotate(8turn); -ms-transform: rotate(8turn); transform: rotate(8turn); }
}
body .circle:nth-child(2) { width: 58.5px; height: 58.5px; margin: -29.25px -29.25px; -webkit-animation: spin2 16s infinite linear; -moz-animation: spin2 16s infinite linear; -o-animation: spin2 16s infinite linear; animation: spin2 16s infinite linear;
}
body .circle:nth-child(2):after { box-shadow: 20.68287px 20.68287px #fff, 0px 29.25px #fff, -20.68287px 20.68287px #fff, -29.25px 0px #fff, -20.68287px -20.68287px #fff, 0px -29.25px #fff, 20.68287px -20.68287px #fff, 29.25px 0px #fff;
}
@-webkit-keyframes spin3 { to { -webkit-transform: rotate(7turn); -ms-transform: rotate(7turn); transform: rotate(7turn); }
}
@-moz-keyframes spin3 { to { -webkit-transform: rotate(7turn); -ms-transform: rotate(7turn); transform: rotate(7turn); }
}
@-o-keyframes spin3 { to { -webkit-transform: rotate(7turn); -ms-transform: rotate(7turn); transform: rotate(7turn); }
}
@keyframes spin3 { to { -webkit-transform: rotate(7turn); -ms-transform: rotate(7turn); transform: rotate(7turn); }
}
body .circle:nth-child(3) { width: 90px; height: 90px; margin: -45px -45px; -webkit-animation: spin3 24s infinite linear; -moz-animation: spin3 24s infinite linear; -o-animation: spin3 24s infinite linear; animation: spin3 24s infinite linear;
}
body .circle:nth-child(3):after { box-shadow: 38.97114px 22.5px #fff, 22.5px 38.97114px #fff, 0px 45px #fff, -22.5px 38.97114px #fff, -38.97114px 22.5px #fff, -45px 0px #fff, -38.97114px -22.5px #fff, -22.5px -38.97114px #fff, 0px -45px #fff, 22.5px -38.97114px #fff, 38.97114px -22.5px #fff, 45px 0px #fff;
}
@-webkit-keyframes spin4 { to { -webkit-transform: rotate(6turn); -ms-transform: rotate(6turn); transform: rotate(6turn); }
}
@-moz-keyframes spin4 { to { -webkit-transform: rotate(6turn); -ms-transform: rotate(6turn); transform: rotate(6turn); }
}
@-o-keyframes spin4 { to { -webkit-transform: rotate(6turn); -ms-transform: rotate(6turn); transform: rotate(6turn); }
}
@keyframes spin4 { to { -webkit-transform: rotate(6turn); -ms-transform: rotate(6turn); transform: rotate(6turn); }
}
body .circle:nth-child(4) { width: 121.5px; height: 121.5px; margin: -60.75px -60.75px; -webkit-animation: spin4 32s infinite linear; -moz-animation: spin4 32s infinite linear; -o-animation: spin4 32s infinite linear; animation: spin4 32s infinite linear;
}
body .circle:nth-child(4):after { box-shadow: 56.12568px 23.24802px #fff, 42.95674px 42.95674px #fff, 23.24802px 56.12568px #fff, 0px 60.75px #fff, -23.24802px 56.12568px #fff, -42.95674px 42.95674px #fff, -56.12568px 23.24802px #fff, -60.75px 0px #fff, -56.12568px -23.24802px #fff, -42.95674px -42.95674px #fff, -23.24802px -56.12568px #fff, 0px -60.75px #fff, 23.24802px -56.12568px #fff, 42.95674px -42.95674px #fff, 56.12568px -23.24802px #fff, 60.75px 0px #fff;
}
@-webkit-keyframes spin5 { to { -webkit-transform: rotate(5turn); -ms-transform: rotate(5turn); transform: rotate(5turn); }
}
@-moz-keyframes spin5 { to { -webkit-transform: rotate(5turn); -ms-transform: rotate(5turn); transform: rotate(5turn); }
}
@-o-keyframes spin5 { to { -webkit-transform: rotate(5turn); -ms-transform: rotate(5turn); transform: rotate(5turn); }
}
@keyframes spin5 { to { -webkit-transform: rotate(5turn); -ms-transform: rotate(5turn); transform: rotate(5turn); }
}
body .circle:nth-child(5) { width: 153px; height: 153px; margin: -76.5px -76.5px; -webkit-animation: spin5 40s infinite linear; -moz-animation: spin5 40s infinite linear; -o-animation: spin5 40s infinite linear; animation: spin5 40s infinite linear;
}
body .circle:nth-child(5):after { box-shadow: 72.75582px 23.6398px #fff, 61.8898px 44.96557px #fff, 44.96557px 61.8898px #fff, 23.6398px 72.75582px #fff, 0px 76.5px #fff, -23.6398px 72.75582px #fff, -44.96557px 61.8898px #fff, -61.8898px 44.96557px #fff, -72.75582px 23.6398px #fff, -76.5px 0px #fff, -72.75582px -23.6398px #fff, -61.8898px -44.96557px #fff, -44.96557px -61.8898px #fff, -23.6398px -72.75582px #fff, 0px -76.5px #fff, 23.6398px -72.75582px #fff, 44.96557px -61.8898px #fff, 61.8898px -44.96557px #fff, 72.75582px -23.6398px #fff, 76.5px 0px #fff;
}
@-webkit-keyframes spin6 { to { -webkit-transform: rotate(4turn); -ms-transform: rotate(4turn); transform: rotate(4turn); }
}
@-moz-keyframes spin6 { to { -webkit-transform: rotate(4turn); -ms-transform: rotate(4turn); transform: rotate(4turn); }
}
@-o-keyframes spin6 { to { -webkit-transform: rotate(4turn); -ms-transform: rotate(4turn); transform: rotate(4turn); }
}
@keyframes spin6 { to { -webkit-transform: rotate(4turn); -ms-transform: rotate(4turn); transform: rotate(4turn); }
}
body .circle:nth-child(6) { width: 184.5px; height: 184.5px; margin: -92.25px -92.25px; -webkit-animation: spin6 48s infinite linear; -moz-animation: spin6 48s infinite linear; -o-animation: spin6 48s infinite linear; animation: spin6 48s infinite linear;
}
body .circle:nth-child(6):after { box-shadow: 89.10666px 23.87606px #fff, 79.89084px 46.125px #fff, 65.2306px 65.2306px #fff, 46.125px 79.89084px #fff, 23.87606px 89.10666px #fff, 0px 92.25px #fff, -23.87606px 89.10666px #fff, -46.125px 79.89084px #fff, -65.2306px 65.2306px #fff, -79.89084px 46.125px #fff, -89.10666px 23.87606px #fff, -92.25px 0px #fff, -89.10666px -23.87606px #fff, -79.89084px -46.125px #fff, -65.2306px -65.2306px #fff, -46.125px -79.89084px #fff, -23.87606px -89.10666px #fff, 0px -92.25px #fff, 23.87606px -89.10666px #fff, 46.125px -79.89084px #fff, 65.2306px -65.2306px #fff, 79.89084px -46.125px #fff, 89.10666px -23.87606px #fff, 92.25px 0px #fff;
}
@-webkit-keyframes spin7 { to { -webkit-transform: rotate(3turn); -ms-transform: rotate(3turn); transform: rotate(3turn); }
}
@-moz-keyframes spin7 { to { -webkit-transform: rotate(3turn); -ms-transform: rotate(3turn); transform: rotate(3turn); }
}
@-o-keyframes spin7 { to { -webkit-transform: rotate(3turn); -ms-transform: rotate(3turn); transform: rotate(3turn); }
}
@keyframes spin7 { to { -webkit-transform: rotate(3turn); -ms-transform: rotate(3turn); transform: rotate(3turn); }
}
body .circle:nth-child(7) { width: 216px; height: 216px; margin: -108px -108px; -webkit-animation: spin7 56s infinite linear; -moz-animation: spin7 56s infinite linear; -o-animation: spin7 56s infinite linear; animation: spin7 56s infinite linear;
}
body .circle:nth-child(7):after { box-shadow: 105.29221px 24.03226px #fff, 97.30464px 46.85944px #fff, 84.4378px 67.3369px #fff, 67.3369px 84.4378px #fff, 46.85944px 97.30464px #fff, 24.03226px 105.29221px #fff, 0px 108px #fff, -24.03226px 105.29221px #fff, -46.85944px 97.30464px #fff, -67.3369px 84.4378px #fff, -84.4378px 67.3369px #fff, -97.30464px 46.85944px #fff, -105.29221px 24.03226px #fff, -108px 0px #fff, -105.29221px -24.03226px #fff, -97.30464px -46.85944px #fff, -84.4378px -67.3369px #fff, -67.3369px -84.4378px #fff, -46.85944px -97.30464px #fff, -24.03226px -105.29221px #fff, 0px -108px #fff, 24.03226px -105.29221px #fff, 46.85944px -97.30464px #fff, 67.3369px -84.4378px #fff, 84.4378px -67.3369px #fff, 97.30464px -46.85944px #fff, 105.29221px -24.03226px #fff, 108px 0px #fff;
}
@-webkit-keyframes spin8 { to { -webkit-transform: rotate(2turn); -ms-transform: rotate(2turn); transform: rotate(2turn); }
}
@-moz-keyframes spin8 { to { -webkit-transform: rotate(2turn); -ms-transform: rotate(2turn); transform: rotate(2turn); }
}
@-o-keyframes spin8 { to { -webkit-transform: rotate(2turn); -ms-transform: rotate(2turn); transform: rotate(2turn); }
}
@keyframes spin8 { to { -webkit-transform: rotate(2turn); -ms-transform: rotate(2turn); transform: rotate(2turn); }
}
body .circle:nth-child(8) { width: 247.5px; height: 247.5px; margin: -123.75px -123.75px; -webkit-animation: spin8 64s infinite linear; -moz-animation: spin8 64s infinite linear; -o-animation: spin8 64s infinite linear; animation: spin8 64s infinite linear;
}
body .circle:nth-child(8):after { box-shadow: 121.37218px 24.14243px #fff, 114.33009px 47.35707px #fff, 102.89436px 68.75182px #fff, 87.50446px 87.50446px #fff, 68.75182px 102.89436px #fff, 47.35707px 114.33009px #fff, 24.14243px 121.37218px #fff, 0px 123.75px #fff, -24.14243px 121.37218px #fff, -47.35707px 114.33009px #fff, -68.75182px 102.89436px #fff, -87.50446px 87.50446px #fff, -102.89436px 68.75182px #fff, -114.33009px 47.35707px #fff, -121.37218px 24.14243px #fff, -123.75px 0px #fff, -121.37218px -24.14243px #fff, -114.33009px -47.35707px #fff, -102.89436px -68.75182px #fff, -87.50446px -87.50446px #fff, -68.75182px -102.89436px #fff, -47.35707px -114.33009px #fff, -24.14243px -121.37218px #fff, 0px -123.75px #fff, 24.14243px -121.37218px #fff, 47.35707px -114.33009px #fff, 68.75182px -102.89436px #fff, 87.50446px -87.50446px #fff, 102.89436px -68.75182px #fff, 114.33009px -47.35707px #fff, 121.37218px -24.14243px #fff, 123.75px 0px #fff;
}
@-webkit-keyframes spin9 { to { -webkit-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); }
}
@-moz-keyframes spin9 { to { -webkit-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); }
}
@-o-keyframes spin9 { to { -webkit-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); }
}
@keyframes spin9 { to { -webkit-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); }
}
body .circle:nth-child(9) { width: 279px; height: 279px; margin: -139.5px -139.5px; -webkit-animation: spin9 72s infinite linear; -moz-animation: spin9 72s infinite linear; -o-animation: spin9 72s infinite linear; animation: spin9 72s infinite linear;
}
body .circle:nth-child(9):after { box-shadow: 137.38068px 24.22392px #fff, 131.08712px 47.71181px #fff, 120.81054px 69.75px #fff, 106.8632px 89.66887px #fff, 89.66887px 106.8632px #fff, 69.75px 120.81054px #fff, 47.71181px 131.08712px #fff, 24.22392px 137.38068px #fff, 0px 139.5px #fff, -24.22392px 137.38068px #fff, -47.71181px 131.08712px #fff, -69.75px 120.81054px #fff, -89.66887px 106.8632px #fff, -106.8632px 89.66887px #fff, -120.81054px 69.75px #fff, -131.08712px 47.71181px #fff, -137.38068px 24.22392px #fff, -139.5px 0px #fff, -137.38068px -24.22392px #fff, -131.08712px -47.71181px #fff, -120.81054px -69.75px #fff, -106.8632px -89.66887px #fff, -89.66887px -106.8632px #fff, -69.75px -120.81054px #fff, -47.71181px -131.08712px #fff, -24.22392px -137.38068px #fff, 0px -139.5px #fff, 24.22392px -137.38068px #fff, 47.71181px -131.08712px #fff, 69.75px -120.81054px #fff, 89.66887px -106.8632px #fff, 106.8632px -89.66887px #fff, 120.81054px -69.75px #fff, 131.08712px -47.71181px #fff, 137.38068px -24.22392px #fff, 139.5px 0px #fff;
}

Home Page	Home
Developer	Massimo
Username	_massimo
Uploaded	September 17, 2022
Rating	4.5
Size	3,826 Kb
Views	38,456

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
Batman	6,875 Kb
Spinner	3,072 Kb
Cat loader	3,899 Kb
Underwater particles	3,401 Kb
Page Not Found	3,710 Kb
Whale pixel art animation	3,215 Kb
Css carousel	2,977 Kb
Css wave	3,157 Kb
Pacman	2,503 Kb
Shovel knight	35,694 Kb

Create amazing captions 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
Fluid Responsive Typography	Jonmilner	4,205 Kb
Simple personal profile	Miroot	2,856 Kb
A Pen by Xand0r	Xand0r	1,928 Kb
Preloader	Rikki_Sixx	2,815 Kb
Default Input, Textareas, Submits, and Buttons in iOS	Demersdesigns	2,334 Kb
CSS3 Butterfly	Timohausmann	3,430 Kb
A simple log in form made with css	Mayurelbhar	2,160 Kb
Sinclair Research Computers	MattCowley	3,068 Kb
Mario	Takaneichinose	3,902 Kb
Prototype Responsive Homepage	Heyitsolivia	7,677 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!