Spinning Loader
How do I make an spinning loader?
One element spinning loader. What is a spinning loader? How do you make a spinning loader? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.
Spinning Loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spinning Loader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="loading-progress"></div>
</body>
</html>
Spinning Loader - Script Codes CSS Codes
.loading-progress { box-sizing: border-box; display: block; height: 40px; width: 40px; position: fixed; top: 50%; left: 50%; margin: -20px 0 0 -20px; border-radius: 40px; border: 5px solid #58989e; border-left: none; border-right: none; border-bottom: none; -webkit-animation: spin-loader 2s linear infinite; animation: spin-loader 2s linear infinite;
}
.loading-progress:before { box-sizing: border-box; content: ''; display: block; position: absolute; height: 30px; width: 30px; border-radius: 30px; border: 5px solid #f6861d; border-left: none; border-right: none; border-bottom: none; top: 50%; left: 50%; margin: -15px 0 0 -15px; -webkit-animation: spin-loader 2s linear infinite; animation: spin-loader 2s linear infinite;
}
.loading-progress:after { box-sizing: border-box; content: ''; display: block; position: absolute; height: 20px; width: 20px; border-radius: 20px; border: 5px solid #db1f25; border-left: none; border-right: none; border-bottom: none; top: 50%; left: 50%; margin: -10px 0 0 -10px; -webkit-animation: spin-loader 1s linear infinite; animation: spin-loader 1s linear infinite;
}
@-webkit-keyframes spin-loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin-loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
![Spinning Loader - Script Codes](http://shots.codepen.io/necks/pen/Xbpbjd-512.jpg)
Developer | Nick Nikolov |
Username | necks |
Uploaded | October 17, 2022 |
Rating | 3 |
Size | 2,273 Kb |
Views | 16,192 |
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 |
Subtle site navigation with description | 3,206 Kb |
Simple grid layout | 1,978 Kb |
User Icons | 3,351 Kb |
4 color border for highlighting feature elements | 4,105 Kb |
Moblie friendly top navbar | 3,556 Kb |
Progress bars with colour change. | 3,845 Kb |
Simple drawer menu | 5,625 Kb |
A Pen by Nick Nikolov | 1,732 Kb |
Range bar with indicator | 3,312 Kb |
Single element speech bubble | 3,191 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 |
Speech bubbles | Something | 1,547 Kb |
Base64 SVG Me | MrBambule | 44,786 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
Simple jQuery Slider | Jurbank | 2,874 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 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!