DEV Community

Cover image for Animation : CSS Bouncy Loader 5 examples. βœ¨πŸ’‘
margishpatel
margishpatel

Posted on

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.

Top comments (1)

Collapse
 
mahavirhalvadiya profile image
Mahavir Halvadiya

Jordar