How to Create Loading Animations with CSS (No GIF Required)

 Learn how to create lightweight loading animations using only CSS. Code examples included: spinners, dots, and progress bars.

1. Why Use CSS Instead of GIFs?

No extra file needed.

Smaller and faster.

Easy to customize with code.

2. Example 1: CSS Spinner

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

.spinner {

  border: 6px solid #f3f3f3;

  border-top: 6px solid #3498db;

  border-radius: 50%;

  width: 40px;

  height: 40px;

  animation: spin 1s linear infinite;

}

@keyframes spin {

  0% { transform: rotate(0deg); }

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

}

3. Example 2: Bouncing Dots

<div class="dots">

  <span></span><span></span><span></span>

</div>

.dots span {

  display: inline-block;

  width: 10px;

  height: 10px;

  margin: 5px;

  background: #3498db;

  border-radius: 50%;

  animation: bounce 1s infinite ease-in-out;

}

.dots span:nth-child(2) { animation-delay: 0.2s; }

.dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {

  0%, 80%, 100% { transform: scale(0); }

  40% { transform: scale(1); }

}

4. Example 3: Progress Bar

<div class="progress"></div>

.progress {

  width: 200px;

  height: 10px;

  background: #eee;

  overflow: hidden;

  position: relative;

}

.progress::before {

  content: "";

  position: absolute;

  width: 50%;

  height: 100%;

  background: #3498db;

  animation: load 2s infinite;

}

@keyframes load {

  0% { left: -50%; }

  100% { left: 100%; }

}

Conclusion
CSS animations are lightweight, fast, and perfect when you don’t want to use GIFs. For more ready-to-use GIF loaders, check out LoadingGift.com.