TheLazy.Dev
Portfolio GitHub

Blog

css |beginners |html |frontend

Animation : CSS Bouncy Loader 5 examples. ✨💡

margishpatel

margishpatel

Posted on March 28, 2023

Animation : CSS Bouncy Loader 5 examples. ✨💡

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

2 .Red Square Bouncy Loader

HTML

<div class="loader"></div>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Purple Diamond Bouncy Loader

HTML

<div class="loader"></div>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

4. Yellow Rectangular Bouncy Loader

HTML

<div class="loader"></div>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

5. Green Triangle Bouncy Loader

HTML

<div class="loader"></div>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
margishpatel
margishpatel

Posted on March 28, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Animation : CSS Bouncy Loader 5 examples. ✨💡
css Animation : CSS Bouncy Loader 5 examples. ✨💡

March 28, 2023