Creates a bouncing css animation loading notification. The code utilizes @keyframes, opacity, transform3D and transform. Sourced under a permissive license.

Creates a bouncing css animation loading notification which utilizes @keyframes, opacity, transform3D and transform

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
<style>
@keyframes bouncing-loader {
to {
opacity: 0.1;
transform: translate3d(0, -16px, 0);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > div {
width: 16px;
height: 16px;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
</style>
<div class="bouncing-loader"> <div></div> <div></div> <div></div> </div> <style> @keyframes bouncing-loader { to { opacity: 0.1; transform: translate3d(0, -16px, 0); } } .bouncing-loader { display: flex; justify-content: center; } .bouncing-loader > div { width: 16px; height: 16px; margin: 3rem 0.2rem; background: #8385aa; border-radius: 50%; animation: bouncing-loader 0.6s infinite alternate; } .bouncing-loader > div:nth-child(2) { animation-delay: 0.2s; } .bouncing-loader > div:nth-child(3) { animation-delay: 0.4s; } </style>
<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -16px, 0);
  }
}

.bouncing-loader {
  display: flex;
  justify-content: center;
}

.bouncing-loader > div {
  width: 16px;
  height: 16px;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}

.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}

.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}
</style>

Tags: CSS, HTML, CSS, CSS code snippet, html code snippet, html element effect, keyframes, bouncing css animation, css animation, animation: bouncing-loader, animation-delay

Image: Unsplash license

CC BY 4.0 added intro and tags – 30 Seconds of Code