Spinner
How do I make an spinner?
Playing with "animation-play-state". Activated on hover. 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="el top"></div> <div class="el right"></div> <div class="el left"></div> <div class="el bottom"></div>
</div>
</body>
</html>
Spinner - Script Codes CSS Codes
@-webkit-keyframes top { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(-30px, -30px) rotate(20deg); -ms-transform: translate(-30px, -30px) rotate(20deg); transform: translate(-30px, -30px) rotate(20deg); } 100% { -webkit-transform: translate(0, 0) rotate(90deg); -ms-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); }
}
@-moz-keyframes top { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(-30px, -30px) rotate(20deg); -ms-transform: translate(-30px, -30px) rotate(20deg); transform: translate(-30px, -30px) rotate(20deg); } 100% { -webkit-transform: translate(0, 0) rotate(90deg); -ms-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); }
}
@-o-keyframes top { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(-30px, -30px) rotate(20deg); -ms-transform: translate(-30px, -30px) rotate(20deg); transform: translate(-30px, -30px) rotate(20deg); } 100% { -webkit-transform: translate(0, 0) rotate(90deg); -ms-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); }
}
@keyframes top { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(-30px, -30px) rotate(20deg); -ms-transform: translate(-30px, -30px) rotate(20deg); transform: translate(-30px, -30px) rotate(20deg); } 100% { -webkit-transform: translate(0, 0) rotate(90deg); -ms-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); }
}
@-webkit-keyframes right { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(30px, -30px) rotate(-20deg); -ms-transform: translate(30px, -30px) rotate(-20deg); transform: translate(30px, -30px) rotate(-20deg); } 100% { -webkit-transform: translate(0, 0) rotate(-90deg); -ms-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); }
}
@-moz-keyframes right { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(30px, -30px) rotate(-20deg); -ms-transform: translate(30px, -30px) rotate(-20deg); transform: translate(30px, -30px) rotate(-20deg); } 100% { -webkit-transform: translate(0, 0) rotate(-90deg); -ms-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); }
}
@-o-keyframes right { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(30px, -30px) rotate(-20deg); -ms-transform: translate(30px, -30px) rotate(-20deg); transform: translate(30px, -30px) rotate(-20deg); } 100% { -webkit-transform: translate(0, 0) rotate(-90deg); -ms-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); }
}
@keyframes right { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(30px, -30px) rotate(-20deg); -ms-transform: translate(30px, -30px) rotate(-20deg); transform: translate(30px, -30px) rotate(-20deg); } 100% { -webkit-transform: translate(0, 0) rotate(-90deg); -ms-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); }
}
@-webkit-keyframes left { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(-30px, 30px) rotate(-20deg); -ms-transform: translate(-30px, 30px) rotate(-20deg); transform: translate(-30px, 30px) rotate(-20deg); } 100% { -webkit-transform: translate(0, 0) rotate(-90deg); -ms-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); }
}
@-moz-keyframes left { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(-30px, 30px) rotate(-20deg); -ms-transform: translate(-30px, 30px) rotate(-20deg); transform: translate(-30px, 30px) rotate(-20deg); } 100% { -webkit-transform: translate(0, 0) rotate(-90deg); -ms-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); }
}
@-o-keyframes left { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(-30px, 30px) rotate(-20deg); -ms-transform: translate(-30px, 30px) rotate(-20deg); transform: translate(-30px, 30px) rotate(-20deg); } 100% { -webkit-transform: translate(0, 0) rotate(-90deg); -ms-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); }
}
@keyframes left { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(-30px, 30px) rotate(-20deg); -ms-transform: translate(-30px, 30px) rotate(-20deg); transform: translate(-30px, 30px) rotate(-20deg); } 100% { -webkit-transform: translate(0, 0) rotate(-90deg); -ms-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); }
}
@-webkit-keyframes bottom { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(30px, 30px) rotate(20deg); -ms-transform: translate(30px, 30px) rotate(20deg); transform: translate(30px, 30px) rotate(20deg); } 100% { -webkit-transform: translate(0, 0) rotate(90deg); -ms-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); }
}
@-moz-keyframes bottom { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(30px, 30px) rotate(20deg); -ms-transform: translate(30px, 30px) rotate(20deg); transform: translate(30px, 30px) rotate(20deg); } 100% { -webkit-transform: translate(0, 0) rotate(90deg); -ms-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); }
}
@-o-keyframes bottom { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(30px, 30px) rotate(20deg); -ms-transform: translate(30px, 30px) rotate(20deg); transform: translate(30px, 30px) rotate(20deg); } 100% { -webkit-transform: translate(0, 0) rotate(90deg); -ms-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); }
}
@keyframes bottom { 15% { -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 60% { -webkit-transform: translate(30px, 30px) rotate(20deg); -ms-transform: translate(30px, 30px) rotate(20deg); transform: translate(30px, 30px) rotate(20deg); } 100% { -webkit-transform: translate(0, 0) rotate(90deg); -ms-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); }
}
html { height: 100%;
}
body { margin: 0; height: 100%; overflow: hidden; background: #000; background: -webkit-radial-gradient(#064475, #000); background: -o-radial-gradient(#064475, #000); background: -moz-radial-gradient(#064475, #000); background: radial-gradient(#064475, #000000);
}
body .container { position: absolute; background: #b2dbfb; width: 60px; height: 60px; left: 50%; margin-left: -30px; top: 50%; margin-top: -30px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); cursor: pointer;
}
body .container:hover .el { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running;
}
body .container .el { display: inline-block; width: 30px; height: 30px; background: #2196F3; margin: -3px; border: 2px solid #2196F3; border-radius: 2px;
}
body .container .top { -webkit-animation: top 1s linear infinite; -moz-animation: top 1s linear infinite; -o-animation: top 1s linear infinite; animation: top 1s linear infinite; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
body .container .right { -webkit-animation: right 1s linear infinite; -moz-animation: right 1s linear infinite; -o-animation: right 1s linear infinite; animation: right 1s linear infinite; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
body .container .left { -webkit-animation: left 1s linear infinite; -moz-animation: left 1s linear infinite; -o-animation: left 1s linear infinite; animation: left 1s linear infinite; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
body .container .bottom { -webkit-animation: bottom 1s linear infinite; -moz-animation: bottom 1s linear infinite; -o-animation: bottom 1s linear infinite; animation: bottom 1s linear infinite; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
| Developer | Massimo |
| Username | _massimo |
| Uploaded | September 17, 2022 |
| Rating | 4 |
| Size | 3,015 Kb |
| Views | 28,336 |
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 |
| Pacman | 2,503 Kb |
| Melting ice cream | 3,839 Kb |
| Upside down cat | 5,464 Kb |
| Mandala drawing concept | 3,474 Kb |
| Cat loader | 3,899 Kb |
| Page Not Found | 3,710 Kb |
| Bernard the polar bear | 4,070 Kb |
| Css wave | 3,157 Kb |
| Spinner | 3,826 Kb |
| Whale pixel art animation | 3,215 Kb |
Create amazing love letters 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 |
| ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
| JS Countdown Timer | Ayoungh | 2,435 Kb |
| SCSS Unit Conversion | Jakob-e | 8,210 Kb |
| Loader | MikitaLisavets | 3,321 Kb |
| HTML5 Breakout | Jaysalvat | 4,873 Kb |
| CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
| A Pen by Anoop | Anoopjohn | 330,760 Kb |
| A Pen by Jim Savage | Madebyjam | 2,418 Kb |
| Portfolio Layout Flex | Lahvjal | 3,489 Kb |
| Hexagons | Ashmind | 4,360 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!