6 Unique and Attractive CSS Loaders for Your Website

Are you looking to add some eye-catching loading animations to your website? Loaders are a great way to keep users engaged while content is being loaded. In this blog post, I’ll show you 6 unique and attractive CSS loaders that you can easily integrate into your website. Each loader comes with its own HTML and CSS code, and I’ve included a live preview so you can see them in action!

---

1. Rotating Circle with Gradient

This loader features a simple rotating circle with a gradient border.

HTML Code:

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

CSS Code:

.loader-1 {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f4f6;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

---

2. Bouncing Dots

This loader uses three bouncing dots with a staggered animation.

HTML Code:

<div class="loader-2">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

CSS Code:

.loader-2 {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #ff6f61;
  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 {
  0% { transform: translateY(0); }
  100% { transform: translateY(-15px); }
}

---

3. Pulse Animation

This loader creates a pulsing effect using a circle.

HTML Code:

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

CSS Code:

.loader-3 {
  width: 50px;
  height: 50px;
  background-color: #9b59b6;
  border-radius: 50%;
  animation: pulse 1s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
}

---

4. Spinning Square

This loader rotates a square continuously.

HTML Code:

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

CSS Code:

.loader-4 {
  width: 40px;
  height: 40px;
  background-color: #2ecc71;
  animation: rotate 1.5s infinite ease-in-out;
}

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

---

5. Wave Animation

This loader creates a wave effect using vertical bars.

HTML Code:

<div class="loader-5">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

CSS Code:

.loader-5 {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.bar {
  width: 6px;
  height: 30px;
  background-color: #e67e22;
  animation: wave 1s infinite ease-in-out;
}

.bar:nth-child(2) {
  animation-delay: 0.1s;
}

.bar:nth-child(3) {
  animation-delay: 0.2s;
}

.bar:nth-child(4) {
  animation-delay: 0.3s;
}

.bar:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes wave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1.5); }
}

---

6. Glowing Ring

This loader creates a glowing effect around a rotating ring.

HTML Code:

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

CSS Code:

.loader-6 {
  width: 50px;
  height: 50px;
  border: 4px solid #f1c40f;
  border-radius: 50%;
  box-shadow: 0 0 10px #f1c40f, 0 0 20px #f1c40f;
  animation: glow 1.5s infinite linear;
}

@keyframes glow {
  0% { box-shadow: 0 0 10px #f1c40f, 0 0 20px #f1c40f; }
  50% { box-shadow: 0 0 20px #f1c40f, 0 0 30px #f1c40f; }
  100% { box-shadow: 0 0 10px #f1c40f, 0 0 20px #f1c40f; }
}

---

That’s it! You now have six unique and attractive CSS loaders to enhance your website’s user experience. Feel free to customize the colors, sizes, and animations to match your design. Happy coding!