Simple Dot Loader
How do I make an simple dot loader?
What is a simple dot loader? How do you make a simple dot loader? This script and codes were developed by Ken Lauguico on 22 December 2022, Thursday.
Simple Dot Loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Dot Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="loader"></div>
</body>
</html>
Simple Dot Loader - Script Codes CSS Codes
/* Setup */
/* Mixins */
/* Loader and Colors */
body,
html { background-color: #5a759a;
}
.loader { display: block; width: 1em; height: 1em; border-radius: 1em; background-color: #fff; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 1em; height: 1em; -webkit-animation: dim 0.5s 0.5s infinite alternate; -moz-animation: dim 0.5s 0.5s infinite alternate; -o-animation: dim 0.5s 0.5s infinite alternate; animation: dim 0.5s 0.5s infinite alternate;
}
.loader:before { content: ''; position: absolute; display: block; width: 1em; height: 1em; border-radius: 1em; background-color: #fff; right: 1.5em; -webkit-animation: dim 1s infinite alternate; -moz-animation: dim 1s infinite alternate; -o-animation: dim 1s infinite alternate; animation: dim 1s infinite alternate;
}
.loader:after { content: ''; position: absolute; display: block; width: 1em; height: 1em; border-radius: 1em; background-color: #fff; left: 1.5em; -webkit-animation: dim 1s 1s infinite alternate; -moz-animation: dim 1s 1s infinite alternate; -o-animation: dim 1s 1s infinite alternate; animation: dim 1s 1s infinite alternate;
}
/* Keyframes */
@-moz-keyframes dim { from { background-color: #fff; } to { background-color: rgba(255,255,255,0.2); }
}
@-webkit-keyframes dim { from { background-color: #fff; } to { background-color: rgba(255,255,255,0.2); }
}
@-o-keyframes dim { from { background-color: #fff; } to { background-color: rgba(255,255,255,0.2); }
}
@keyframes dim { from { background-color: #fff; } to { background-color: rgba(255,255,255,0.2); }
}
Developer | Ken Lauguico |
Username | kenlauguico |
Uploaded | December 22, 2022 |
Rating | 3 |
Size | 2,272 Kb |
Views | 6,072 |
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 |
Typing Simulator | 2,910 Kb |
Protoshow.js Demo | 1,984 Kb |
Pure CSS Image Slider | 3,208 Kb |
Flat Email Form | 3,415 Kb |
A Pen by Ken Lauguico | 4,517 Kb |
Just an animated underline | 2,229 Kb |
A Responsive Menu | 3,590 Kb |
Force Counter | 2,732 Kb |
Animated Captions via data- Attribute | 2,502 Kb |
Fourground Logo | 3,072 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 |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Mondrian | Chrisarmstrong | 2,787 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
Background Images | Jooonebug | 2,100 Kb |
Under construction | GhostRider | 1,642 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Custom checkbox example | Capelo | 3,495 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!