PocketPlay
中文

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.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up

Loaders

Settings

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

—

HTML


      

        
CSS

        
      

      

      

        
      

    

  




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.


  


  

    
    

          
            
            
              CSS Gradient GeneratorHOT
              Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file.
            
          
          
            
            
              CSS Filter Generator
              Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule.
            
          
          
            
            
              CSS Animation Generator
              Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview.
            
          
          
            
            
              Box Shadow Generator
              Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS.
            
          
          
            
            
              Border Radius Generator
              Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS.
            
          
          
            
            
              Color PickerHOT
              Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast.
            
          
          
            
            
              Color Converter
              Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly.
            
          
          
            
            
              CSS Grid Generator
              Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML.
            
          
    

    
All tools →