Skip to content
PocketPlayCSS & design
中文

Tools

Tools164 free tools that run in your browser.PDF toolsMerge, split, compress and convert PDFs.Image toolsCompress, convert, resize and make ID photos.Audio & videoTrim, convert and record audio and video.Text toolsCount, clean, compare and convert text.Developer toolsJSON, encoding, network and security utilities.CSS & designGradients, shadows, colours and layout CSS.CalculatorsEveryday numbers, dates and conversions.

Games

GamesBoard and card games, ready in one click.Board gamesChess, Go, Xiangqi and 14 more. Play a friend online.Card gamesSolitaire, Hearts, Spades and 40+ classics.

Create & choose

CreatorsReview your Douyin and Instagram posts and plan the next one.VPS pickerDescribe your project. Get a VPS shortlist.

More

TarotA card reading as a prompt for reflection.Skill RankDiscover and compare AI agent skills.CiteProofCheck a bibliography against real records.

Read & talk

BlogPractical guides with sources.CommunityReviews, recommendations and red flags.
Sign in

Tools

Tools164 free tools that run in your browser.PDF toolsMerge, split, compress and convert PDFs.Image toolsCompress, convert, resize and make ID photos.Audio & videoTrim, convert and record audio and video.Text toolsCount, clean, compare and convert text.Developer toolsJSON, encoding, network and security utilities.CSS & designGradients, shadows, colours and layout CSS.CalculatorsEveryday numbers, dates and conversions.

Games

GamesBoard and card games, ready in one click.Board gamesChess, Go, Xiangqi and 14 more. Play a friend online.Card gamesSolitaire, Hearts, Spades and 40+ classics.

Create & choose

CreatorsReview your Douyin and Instagram posts and plan the next one.VPS pickerDescribe your project. Get a VPS shortlist.

More

TarotA card reading as a prompt for reflection.Skill RankDiscover and compare AI agent skills.CiteProofCheck a bibliography against real records.

Read & talk

BlogPractical guides with sources.CommunityReviews, recommendations and red flags.
Account中文

CSS Loading Spinners

18 pure-CSS loading spinners — rings, dots, bars, pulse, ripple, skeleton shimmer — with colour, size and speed controls and copyable HTML + CSS.

FreeRuns in your browserNo sign-up

Loaders

Settings

Colour
Track / second colour
Preview background
Size 48px
Thickness 5px
Duration 1.0s
Accessibility

—

HTML





CSS



















Related tools
CSS & design
CSS Gradient GeneratorCSS Filter GeneratorCSS Animation GeneratorBox Shadow GeneratorBorder Radius GeneratorColor Picker
How to build a CSS loading spinner
  1. Pick a loader from the gallery — rings, dots, bars, pulses, a skeleton shimmer and an indeterminate progress bar are all there.
  2. Set the colour, the track colour, the size, the stroke thickness and the duration; the stage shows the animation at full size.
  3. Copy the HTML and the CSS (or both at once) and paste them into your project — no images, no JavaScript, no library.
FAQ
Do these need JavaScript?
No. Every loader here is one element (sometimes with a few empty spans) plus CSS keyframes. Show and hide it however your app already does.
What is the reduced-motion fallback for?
Some people set “reduce motion” in their OS. The optional block wraps the animation in @media (prefers-reduced-motion: reduce) and slows or stops it, which keeps the loader accessible without removing it.
Can I use these inside a button?
Yes — pick a small size (16–24px), set the colour to currentColor in the copied CSS and drop the element next to the label. It will inherit the button's text colour.
Guides and tipsPractical how-tos from the PocketPlay Tools blog.
Something missing or broken?
Request a tool, report a bug or share a tip with other users.
Request a toolOpen community
Privacy · Terms