Skip to content
ToolsOnDuty - free online tools
CSS & Design

CSS Loader and Spinner Generator

Create animated CSS loading spinners and copy the CSS.

Free foreverRuns in your browserNo sign-up
.loader {
  width: 48px;
  height: 48px;
  border: 6px solid #1B5DF533;
  border-top-color: #1B5DF5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

About the CSS Loader and Spinner Generator

A CSS-only loading spinner shows progress without images or JavaScript, using animation and keyframes.

This tool lets you pick a spinner style, size, colour and speed with a live animated preview, then copy the CSS including the keyframes.

It runs in your browser.

Key features

  • Ring, dual-ring and pulse styles
  • Adjustable size, colour and speed
  • Live animated preview
  • Copy CSS with keyframes

How to use

  1. 1Choose a spinner style.
  2. 2Set the size, colour and speed.
  3. 3Copy the CSS into your project.

Examples

Ring spinner
Output: animation: spin 1s linear infinite;

A rotating bordered circle is the classic CSS loading spinner.

Frequently asked questions

Does it need JavaScript?
No. The spinner is pure CSS using animation and keyframes, so it works without any script.
How do I use it?
Add the copied CSS to your stylesheet and give a div the loader class. The keyframes are included in the output.
Can I change the speed?
Yes. The speed slider sets the animation duration in seconds, from fast to slow.

Related tools