CSS loader / spinner generator

Choose a loader style (circle, dots, bars, pulse), customize its color, size, and speed, then copy the generated HTML and CSS code. No images, just pure CSS generated and previewed in your browser.

Loader style

Color

Size: 48px

Speed: 1s

HTML + CSS code

<style>
.byteryo-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #4f46e533;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: byteryo-spin 1s linear infinite;
}

@keyframes byteryo-spin {
  to { transform: rotate(360deg); }
}
</style>

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

How it works

A pure CSS animated loader is much lighter than a GIF and automatically adapts to your interface's color and theme. Each style offered here relies on a different CSS animation (@keyframes): continuous rotation for the circle, time offset between multiple elements for dots and bars, and scale/opacity variation for the pulse.

Does the generated code work without JavaScript?

Yes, the animation is entirely handled by CSS via @keyframes: just copy the <style> block and the corresponding HTML into your page, no script is needed to run the loader.

How do I show the loader only during loading?

Dynamically add or remove the loader's HTML block (or toggle a display: none class) with your usual JavaScript framework while a request or process is running, then hide it once the content is ready.

The code is generated instantly in your browser from your settings, with no server connection.