This content originally appeared on DEV Community and was authored by margishpatel
The CSS Bouncy Loader is a simple animation that creates a bouncing effect, typically used to indicate to the user that content is loading.
Here are five examples of different CSS Bouncy Loaders:
1. Blue Circle Bouncy Loader
HTML
<div class="loader"></div>
CSS
.loader {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #3498db;
position: relative;
animation: bouncy-loader 0.6s infinite alternate;
}
@keyframes bouncy-loader {
0% {
top: 0;
}
100% {
top: 20px;
}
}
2 .Red Square Bouncy Loader
HTML
<div class="loader"></div>
CSS
.loader {
width: 30px;
height: 30px;
background-color: #e74c3c;
position: relative;
animation: bouncy-loader 0.5s infinite alternate;
}
@keyframes bouncy-loader {
0% {
top: 0;
}
100% {
top: 20px;
}
}
3. Purple Diamond Bouncy Loader
HTML
<div class="loader"></div>
CSS
.loader {
width: 30px;
height: 30px;
background-color: #9b59b6;
transform: rotate(45deg);
position: relative;
animation: bouncy-loader 0.7s infinite alternate;
}
@keyframes bouncy-loader {
0% {
top: 0;
}
100% {
top: 20px;
}
}
4. Yellow Rectangular Bouncy Loader
HTML
<div class="loader"></div>
CSS
.loader {
width: 50px;
height: 30px;
background-color: #f1c40f;
position: relative;
animation: bouncy-loader 0.8s infinite alternate;
}
@keyframes bouncy-loader {
0% {
top: 0;
}
100% {
top: 20px;
}
}
5. Green Triangle Bouncy Loader
HTML
<div class="loader"></div>
CSS
.loader {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid #2ecc71;
position: relative;
animation: bouncy-loader 0.6s infinite alternate;
}
@keyframes bouncy-loader {
0% {
top: 0;
}
100% {
top: 20px;
}
}
These are just a few examples of the CSS Bouncy Loader. You can customize the animation by adjusting the size, shape, color, and timing to create your own unique loader.
Hope you like it.
That’s it — thanks.
This content originally appeared on DEV Community and was authored by margishpatel
margishpatel | Sciencx (2023-03-28T13:24:33+00:00) Animation : CSS Bouncy Loader 5 examples. ✨💡. Retrieved from https://www.scien.cx/2023/03/28/animation-css-bouncy-loader-5-examples-%e2%9c%a8%f0%9f%92%a1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.