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 |
CSS Loading Boxes Animation | 2,639 Kb |
Single element CSS loading dots | 2,868 Kb |
Single Element Hamburger Icon - SASS Mixin | 3,542 Kb |
Simple Expanding Pagination | 2,845 Kb |
Coded With Love Single Element Icons | 2,941 Kb |
CSS Only Animated Loading Spinner | 2,444 Kb |
Flat CSS Color Names | 4,806 Kb |
CSS Vignette | 2,015 Kb |
Simple Login Form | 2,535 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 |
Pink expansion tunnel | Vez | 1,738 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Out of the blue | Giaco | 2,537 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 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!