CSS Loading Animations

Spinner

Spinner is a basic rotating spinner that you can use in your project to display the loading process. This animation has two colors: dark and light, where the dark color rotates over the light color.

HTML Code

<div class="spinner"></div>

CSS Code

.spinner {
  width: 40px;
  height: 40px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #006969;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Bouncing Dots

The bouncing dots is a loading animation having three dots bouncing down that you can use for showing the loading process.

See more: Three-dots loading animations.

HTML Code

<div class="dots">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

CSS Code

.dots {
  display: flex;
  justify-content: space-around;
  width: 60px;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #006969;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
}

.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-15px); }
}

Pulsing Circle

The pulsing circle loading animation is pretty cool, which has a color-filled circle that expands and fades out repeatedly. It gives an amazing pulsing effect. You can use this animation to show a beautiful loading process.

HTML Code

<div class="pulse"></div>

CSS Code

.pulse {
  width: 40px;
  height: 40px;
  background-color: #006969;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
  opacity: 0.7;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

Blinking Dots

The blinking dots loading animation shows three dots that fade in and out sequentially; you can use it to show the loading process.

HTML Code

<div class="blinking-dots">
  <div class="blink-dot"></div>
  <div class="blink-dot"></div>
  <div class="blink-dot"></div>
</div>

CSS Code

.blinking-dots {
  display: flex;
  justify-content: space-around;
  width: 60px;
}

.blink-dot {
  width: 10px;
  height: 10px;
  background-color: #006969;
  border-radius: 50%;
  animation: blink 1.4s infinite both;
}

.blink-dot:nth-child(2) { animation-delay: 0.2s; }
.blink-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

Growing Bar

Growing bar loading animation displays a colored bar that smoothly grows and shrinks; you can use it to display a simple but attractive loading process.

HTML Code

<div class="loading-bar"></div>

CSS Code

.loading-bar {
  width: 0;
  height: 6px;
  background-color: #006969;
  animation: load-bar 1.5s infinite ease-in-out;
}

@keyframes load-bar {
  0%, 100% { width: 0; }
  50% { width: 100px; }
}

Rotating Square

The rotating square loading animation shows a continuously rotating square; you can use it to show the loading process.

HTML Code

<div class="rotating-square"></div>

CSS Code

.rotating-square {
  width: 30px;
  height: 30px;
  background-color: #006969;
  animation: rotate-square 1s infinite linear;
}

@keyframes rotate-square {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Pulsating Rings

Pulsating rings loading animation shows concentric rings that expand and contract to create a pulsating effect. You can use it to show the loading process.

HTML Code

<div class="pulsating-rings"></div>

CSS Code

.pulsating-rings {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid #006969;
  animation: pulsate 1.5s infinite;
}

@keyframes pulsate {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.5); opacity: 0; }
}

Spinning Wheel

The spinning wheel loading animation shows a wheel that spins continuously to indicate loading.

HTML Code

<div class="spinning-wheel"></div>

CSS Code

.spinning-wheel {
  width: 40px;
  height: 40px;
  border: 4px solid transparent;
  border-top: 4px solid #006969;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Expanding Dot

Expanding dot loading animation shows a single dot that expands and contracts to create a loading effect.

HTML Code

<div class="expanding-dot"></div>

CSS Code

.expanding-dot {
  width: 20px;
  height: 20px;
  background-color: #006969;
  border-radius: 50%;
  animation: expand 1s infinite;
}

@keyframes expand {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

Zigzag Loader

Zigzag loader shows a zigzag line that moves horizontally; you can use this loading animation to show a dynamic loading process.

HTML Code

<div class="zigzag-loader"></div>

CSS Code

.zigzag-loader {
  width: 50px;
  height: 10px;
  background-color: #006969;
  animation: zigzag 0.6s infinite alternate;
}

@keyframes zigzag {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}