Free, local and no login

CSS loading animation generator

Create loaders, spinners and subtle progress motion with visual controls. Build the animation, test the timing, then export lightweight CSS.

Create an animation

Try it right here

A working example with the exact code it produces. Copy it, or open it in the editor and change anything.

Edit this animation All formats
animation.css
.spinner {
  transform: translate3d(208px, 128px, 0);
  width: 64px;
  height: 64px;
  background: #00000000;
  stroke-width: 8;
  stroke: #8b7bff;
  stroke-dasharray: 30;
  stroke-dashoffset: 0;
  animation: spinner-anim 1200ms linear 0ms infinite both;
  will-change: transform, opacity;
}

@keyframes spinner-anim {
  0% {
    transform: translate3d(208px, 128px, 0);
  }
  75% {
    transform: translate3d(208px, 128px, 0) rotate(360deg);
  }
  100% {
    transform: translate3d(208px, 128px, 0) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    transition: none;
  }
}

Why it is built this way

Most spinner snippets fake the arc with a transparent border, which locks you into a circle and a single colour. This draws a real stroked arc and rotates it, so the thickness, gap and colour are all yours to change. Rotation runs on the compositor, so it costs nothing on the main thread.

More ready-made animations

Browse all animations →

Skeleton Loading Animation

Staggered skeleton placeholder bars that pulse while content loads. Free CSS, no framework.

CSS Pulse Animation

A soft looping pulse for badges, status dots and live indicators.

Ping / Ripple Effect

An expanding ring that fades out — for notifications and live status.

What you can do

Make spinners, pulsing indicators and skeleton motion

Avoid heavy runtime animation dependencies

Respect reduced-motion preferences in exported CSS

How it works

  1. 01

    Start with a preset or add a simple shape.

  2. 02

    Animate scale, rotation or opacity on the timeline.

  3. 03

    Export CSS and apply it to your loading component.

Frequently asked questions

Can CSS loaders work without JavaScript?

Yes. CSS keyframes can power many loading states without a JavaScript animation library.

Are generated animations accessible?

MotionCraft can include a prefers-reduced-motion guard in generated output.

Open MotionCraft