CSS only loading spinner
How do I make an css only loading spinner?
What is a css only loading spinner? How do you make a css only loading spinner? This script and codes were developed by Jelmer on 02 December 2022, Friday.
CSS only loading spinner - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS only loading spinner</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">Please wait...</div>
</body>
</html>
CSS only loading spinner - Script Codes CSS Codes
html,
body { color: white; height: 100%;
}
body { background: #30aadc; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.loading { text-indent: -9999em; border-radius: 50%; border: 3px dotted white; height: 25px; width: 25px; -webkit-animation: turn 1.5s linear infinite; animation: turn 1.5s linear infinite;
}
@-webkit-keyframes turn { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes turn { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
Developer | Jelmer |
Username | jelmerdemaat |
Uploaded | December 02, 2022 |
Rating | 3 |
Size | 2,086 Kb |
Views | 14,168 |
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 |
A Pen by Jelmer | 1,718 Kb |
Replaced content cannot have pseudo elements | 1,515 Kb |
Simple responsive photo slider gallery | 3,558 Kb |
Animated counter element | 3,412 Kb |
Ungrid with gutters | 1,644 Kb |
Check comment length to filter unuseful ones | 2,759 Kb |
Get Gist comments using GitHub API | 2,020 Kb |
Justified divs, attempt 3 | 1,816 Kb |
Responsive form design | 4,074 Kb |
CSS only slider | 3,131 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 |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Prism | Pyrografix | 2,843 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 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!