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 |
Check comment length to filter unuseful ones | 2,759 Kb |
Justified divs, attempt 3 | 1,816 Kb |
Justified divs, attempt 2 | 1,795 Kb |
Loading spinner moving bars | 2,025 Kb |
A pure CSS slideshow | 4,471 Kb |
Little loading spinner | 2,599 Kb |
Responsive form design | 4,074 Kb |
Basic HTML5 video functions | 1,734 Kb |
Replaced content cannot have pseudo elements | 1,515 Kb |
Simple smart calculated grid system | 2,975 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 Oliver Schafeld | Schafeld | 1,720 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Scrolling Horizontal Isotope | Bramus | 2,017 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Twitch TV | Natester13 | 4,488 Kb |
Button Option Group | Honchoman | 1,859 Kb |
Zeichensatz | Moklick | 2,058 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
RAQuote | Naderk007 | 4,412 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!