🔄 Spinner

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

.spinner-classic {
  width: 50px;
  height: 50px;
  border: 4px solid #f0f0f0;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

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

.spinner-gradient {
  width: 60px;
  height: 60px;
  border: 5px solid transparent;
  border-top-color: #667eea;
  border-right-color: #764ba2;
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

<div class="spinner-double"><div class="spinner-double-inner"></div></div>

.spinner-double {
  width: 60px;
  height: 60px;
  position: relative;
}
.spinner-double,
.spinner-double-inner {
  border: 4px solid transparent;
  border-radius: 50%;
}
.spinner-double {
  border-top-color: #667eea;
  animation: spin 1.5s linear infinite;
}
.spinner-double-inner {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-top-color: #764ba2;
  animation: spin 1s linear infinite reverse;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}