Say Hi

UI Recipe

LoadingSpinners

A collection of pure-CSS loading indicators — spinners, dots, pulses, bars, and blocks. Zero JavaScript, zero images, maximum style.

All Spinners

Ring Spinner

The classic border-based spinner. Transparent sides create the rotation effect. 

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(176,109,255,0.2);
  border-top-color: #b06dff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { rotate: 1turn; }
}

Bouncing Dots

Three dots with staggered animation delays for a cascading bounce effect. 

.dot {
  animation: bounce 1.4s ease-in-out infinite both;
}
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

Pulse

A scaling circle that breathes in and out. Great for loading states or "live" indicators. 

.pulse {
  width: 40px;
  height: 40px;
  background: #b06dff;
  border-radius: 50%;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.7; }
}