Animation : CSS Bouncy Loader 5 examples. ✨💡

#css #beginners #html #frontend

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.