ZeroServer.tools

CSS Loader Generator

Create a pure-CSS spinner and copy the code — no images, no JavaScript.

Size48px

Thickness5px

Speed1s

Spinner color

Track color

Live preview

CSS

.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

How the CSS spinner works

This classic spinner is a square element with a fully rounded border. Three sides use a light track color and one side (the top) uses the accent color, so when the element spins via a simple @keyframes rotation it looks like a moving arc. It needs no images and no JavaScript — just paste the CSS and add class="loader" to a <div>.

More CSS tools: the animation generator, the transition generator, and the transform generator.