Single div CSS loaders
How do I make an single div css loaders?
What is a single div css loaders? How do you make a single div css loaders? This script and codes were developed by Alan Shortis on 14 November 2022, Monday.
Single div CSS loaders - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single div CSS loaders</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="loading"></div>
<div class="loading-pulse"></div>
<div class="loading loading--double"></div>
</body>
</html>
Single div CSS loaders - Script Codes CSS Codes
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes pulse { 50% { background: white; }
}
@keyframes pulse { 50% { background: white; }
}
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #333333;
}
.loading { border-radius: 50%; width: 24px; height: 24px; border: 0.25rem solid rgba(255, 255, 255, 0.2); border-top-color: white; -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear;
}
.loading--double { border-style: double; border-width: .5rem;
}
.loading-pulse { position: relative; width: 6px; height: 24px; background: rgba(255, 255, 255, 0.2); -webkit-animation: pulse 750ms infinite; animation: pulse 750ms infinite; -webkit-animation-delay: 250ms; animation-delay: 250ms;
}
.loading-pulse:before, .loading-pulse:after { content: ''; position: absolute; display: block; height: 16px; width: 6px; background: rgba(255, 255, 255, 0.2); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-animation: pulse 750ms infinite; animation: pulse 750ms infinite;
}
.loading-pulse:before { left: -12px;
}
.loading-pulse:after { left: 12px; -webkit-animation-delay: 500ms; animation-delay: 500ms;
}
Developer | Alan Shortis |
Username | alanshortis |
Uploaded | November 14, 2022 |
Rating | 4.5 |
Size | 2,611 Kb |
Views | 20,240 |
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 |
Responsive Grid | 2,064 Kb |
Count up | 2,391 Kb |
Orb 2 | 0 Kb |
Subtle animated gradient background | 1,475 Kb |
Shaft of Light | 0 Kb |
Toggle Buttons | 3,150 Kb |
CSS Tooltips | 3,836 Kb |
Orb | 0 Kb |
Burger menu icon | 2,374 Kb |
2D fluid image | 1,945 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 |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
A Pen by Bryan | Brydave | 2,286 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Simple Login Form | JoshBlackwood | 4,418 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!