Single element CSS loading dots
How do I make an single element css loading dots?
Loading animation using only one HTML element and CSS. . What is a single element css loading dots? How do you make a single element css loading dots? This script and codes were developed by Andréas Lundgren on 01 December 2022, Thursday.
Single element CSS loading dots - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single element CSS loading dots</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* variables */
.loading { background: rgba(223, 42, 42, 0.5); border: 1px solid rgba(223, 42, 42, 0.1); border-radius: 10px; box-shadow: 0 0 16px rgba(186, 28, 28, 0.5); display: block; margin-top: -20px; margin-left: -35px; position: absolute; top: 50%; left: 50%; z-index: 9999; width: 70px; height: 40px;
}
.loading::before, .loading::after { animation: loading-dots 1s infinite; background: #df2a2a; border-radius: 10px; content: ""; display: block; position: absolute; top: 10px; width: 20px; height: 20px;
}
.loading::before { left: 10px;
}
.loading::after { animation-delay: 0.5s; right: 10px;
}
@keyframes loading-dots { 0% { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 0.5; -moz-transform: scale(0.9); -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="loading"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Single element CSS loading dots - Script Codes CSS Codes
/* variables */
.loading { background: rgba(223, 42, 42, 0.5); border: 1px solid rgba(223, 42, 42, 0.1); border-radius: 10px; box-shadow: 0 0 16px rgba(186, 28, 28, 0.5); display: block; margin-top: -20px; margin-left: -35px; position: absolute; top: 50%; left: 50%; z-index: 9999; width: 70px; height: 40px;
}
.loading::before, .loading::after { animation: loading-dots 1s infinite; background: #df2a2a; border-radius: 10px; content: ""; display: block; position: absolute; top: 10px; width: 20px; height: 20px;
}
.loading::before { left: 10px;
}
.loading::after { animation-delay: 0.5s; right: 10px;
}
@keyframes loading-dots { 0% { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 0.5; -moz-transform: scale(0.9); -ms-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
}
Developer | Andréas Lundgren |
Username | adevade |
Uploaded | December 01, 2022 |
Rating | 3 |
Size | 2,868 Kb |
Views | 30,360 |
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 |
Simple Note | 5,355 Kb |
Dynamic Text on Button | 3,166 Kb |
Hamburger Menu Icon Animation | 2,832 Kb |
Stack of Cards - SASS Mixin | 3,426 Kb |
CSS Vignette | 2,015 Kb |
Simple CSS Button Hover Effect | 2,837 Kb |
Flat CSS Color Names | 4,806 Kb |
Fill Button - CSS Hover Animation | 2,552 Kb |
CSS Loading Boxes Animation | 2,639 Kb |
Custom -webkit Scrollbars | 3,059 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 |
Box-sizing | Elad2412 | 1,572 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
Boom | Mhrjnsa1 | 1,794 Kb |
Expert Help | SinceSidSlid | 4,064 Kb |
Hoi hoi | JohnTheCat | 7,248 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Svg sky | Omodev | 7,070 Kb |
Donald Trump - The New Yorker | Agbales | 2,502 Kb |
Scrolling Horizontal Isotope | Bramus | 2,017 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!