HTML & CSSbeginnerRuns in browser

CSS Loading Spinners Showcase

A single HTML page demonstrating six different loading-indicator patterns built entirely with CSS keyframe animations, useful as a reference for choosing or adapting a spinner for a real project.

Edit in Code Studio

Live result

Run the original project

index.htmlSandboxed browser preview

Complete source

Read and copy the code

Loading source viewer...

Inside the project

How it works

Each spinner is a small HTML element (or a few nested elements) styled with a dedicated CSS keyframe animation.
Rotation, bounce, pulse, and growth effects are produced with transform and box-shadow changes rather than JavaScript.
Staggered animation-delay values on repeated child elements create the dot and square sequence effects.

Try it yourself

Run and customize it

01Open the live preview to see all six spinners animating at once.
02Compare the CSS for each spinner in the source viewer to see which technique produces which effect.
03Open the project in Code Studio to copy a single spinner's CSS into your own project.

Learning goals

What to study in this source

Recognize border-based, transform-based, and box-shadow-based techniques for building CSS loading indicators.
Understand how animation-delay on sibling elements creates a staggered sequence from one shared keyframe rule.
See how infinite CSS animations run efficiently without any JavaScript timer or animation loop.

Next experiments

Useful ways to customize it

Change the color variables used across the spinners to match a different brand palette.
Adjust animation-duration values to make specific spinners feel faster or slower relative to the others.
Extract a single spinner's CSS rule set into a reusable class for use in another project.

Common questions

CSS Loading Spinners Showcase FAQs

Do any of these loading spinners use JavaScript?

No. All six spinners are built entirely with HTML elements and CSS keyframe animations, with no JavaScript involved anywhere on the page.

Which spinner styles are included in the showcase?

The page includes a rotating ring, a dual-tone ring, three bouncing dots, a pulsing circle, a sweeping progress bar, and five growing squares.

Can I use one of these spinners in my own project?

Yes. Copy the relevant CSS class and keyframe rule for the spinner you want, along with its small HTML structure, into your own page.

Will these spinners work on mobile browsers?

Yes. The animations use standard CSS properties supported by all modern mobile and desktop browsers, and the layout is responsive.

Can I change the spinner colors and sizes?

Yes. Open the project in Code Studio and edit the color values, width, height, and border thickness in each spinner's CSS rule.

How do I download the spinner CSS?

Download the project ZIP, extract index.html, and open it in a text editor to copy the CSS for the spinner you need.

More source code

Related projects

intermediate / 1 file