CSS Loader Generator - Spinner, Dots, Bars & Pulse Animations Free

Generate pure CSS loading animations including spinner, dots, bars, pulse, and ring. Customize size, color, and speed, then copy the full code

CSS Tools

Tool

Loader Style

Size (40px)Color

#6366f1

Speed (1s)

HTML + CSS

<style>
.loader-_R_hbqav5ubqiudb_ {
  width: 40px;
  height: 40px;
  border: 4px solid #6366f140;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: loader-_R_hbqav5ubqiudb_-spin 1s linear infinite;
}
@keyframes loader-_R_hbqav5ubqiudb_-spin {
  to { transform: rotate(360deg); }
}
</style>

<div class="loader-_R_hbqav5ubqiudb_"></div>

How to Use

1Click a loader preset: spinner, dots, bars, pulse, or ring
2Adjust the size (20–80px), color, and animation speed
3Preview the loader animation live
4Copy the full HTML + CSS code including @keyframes and paste it into your project

Frequently Asked Questions

Yes. All loaders are implemented with pure CSS using @keyframes animations. No JavaScript or external libraries are required.

Yes. Use the color picker to set any color. The generated CSS uses that exact color value in the relevant properties (border-color, background-color, etc.).

The speed slider adjusts the animation-duration of the @keyframes. Lower values (e.g. 0.3s) create faster animations; higher values (e.g. 3s) create slower ones.

Copy the generated HTML structure and the accompanying CSS (including @keyframes). Paste the CSS into your stylesheet and the HTML wherever you want the loader to appear.

<style> .loader-_R_hbqav5ubqiudb_ { width: 40px; height: 40px; border: 4px solid #6366f140; border-top-color: #6366f1; border-radius: 50%; animation: loader-_R_hbqav5ubqiudb_-spin 1s linear infinite; } @keyframes loader-_R_hbqav5ubqiudb_-spin { to { transform: rotate(360deg); } } </style> <div class="loader-_R_hbqav5ubqiudb_"></div>

Frequently Asked Questions

Yes. All loaders are implemented with pure CSS using @keyframes animations. No JavaScript or external libraries are required.

Yes. Use the color picker to set any color. The generated CSS uses that exact color value in the relevant properties (border-color, background-color, etc.).

The speed slider adjusts the animation-duration of the @keyframes. Lower values (e.g. 0.3s) create faster animations; higher values (e.g. 3s) create slower ones.

Copy the generated HTML structure and the accompanying CSS (including @keyframes). Paste the CSS into your stylesheet and the HTML wherever you want the loader to appear.