CSS Live Preview Available

Animated Loading Spinner

Smooth rotating loading spinner with gradient border

CSS3AnimationLoadingSpinnerKeyframes

Code

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(102, 126, 234, 0.2);
  border-radius: 50%;
  border-top-color: #667eea;
  animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

HTML

<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="spinner"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>

Live Preview