GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 Loading Screen Designs — Pretty CSS Loaders

· Godrich · 9 items · 15 min read

LoadersSCSSCSS onlyLoadingLanding pageDashboard

A loading screen design is the first thing your site says while the user waits. A pastel ring or a circle filling with water makes that wait feel intentional —

Candy ring spin01 loading-screen-candy-ring Gooey dots02 loading-screen-gooey-dots Morphing blob03 loading-screen-blob-morph Squish ball04 loading-screen-squish-ball Orbit dots05 loading-screen-orbit-dots Liquid fill circle06 loading-screen-liquid-fill Count-up number07 loading-screen-count-up Cube stack08 loading-screen-cube-stack Curtain reveal09 loading-screen-curtain-reveal

Auto-plays · click a tile to jump to its section · all nine in one zip

The nine loading screen design ideas follow the order you'd actually pick them in, not popularity. You start with the safe first choice, the candy ring (01), and the familiar dots (02), move into personality with the blob (03) and the ball (04), and then give the wait meaning with the orbit (05) and the liquid fill (06). The count-up (07) and cube stack (08) show progress, and the curtain (09) stages the moment loading ends. When the one waiting is a chat window rather than a person, 9 CSS AI Chat Loading Animations takes the slot, and when the screen changes pages entirely it's Page Loading Animation CSS that fits.

01Candy ring spin

What this css loading animation shows

A conic-gradient ring blending three pastel colors gets carved into a donut with mask and spins once a second. A wrapper around it breathes to 1.12× on its own slower, 2-second cycle, so the ring feels alive instead of merely rotating.

Candy ring spin
Open in a new tab

01 · Candy ring spin — Measured area 9.335% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

conic-gradientmask$duration

Where to look in the code

It reads like a piece of candy on a dark first screen, which makes it a good flagship loader for dark-themed apps.

.cr-ring {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, $color, $subject-lilac, $subject-sky, $color);
  mask: radial-gradient(farthest-side, #0000 calc(100% - 22px), #000 calc(100% - 21px));
}
.cr-wrap.is-demo {
  .cr-ring { animation: cr-spin $duration linear infinite; }
  animation: cr-breathe 2s $easing infinite;
}
@keyframes cr-spin { to { transform: rotate(360deg); } }
@keyframes cr-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

02Gooey dots

What happens on screen

Only the middle dot moves — it slides left and right to visit its two stationary siblings, stretching into a blob on contact before snapping back to center. The first version used the classic blur plus contrast filter trick, but on a yellow background it left a red rim around every dot, so the demo now boosts only the alpha channel with an SVG feColorMatrix.

Gooey dots
Open in a new tab

02 · Gooey dots — Measured area 3.392% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

filter: blur + contrasttranslateX$duration

How to read the code

Same motion, zero color artifacts.

<svg width="0" height="0" style="position:absolute">
  <defs>
    <filter id="goo-filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
      <feColorMatrix in="blur" mode="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"/>
    </filter>
  </defs>
</svg>
<div class="goo">
  <span class="goo-dot"></span>
  <span class="goo-dot gd-b"></span>
  <span class="goo-dot"></span>
</div>

.goo {
  display: flex;
  align-items: center;
  padding: $sp-6 $sp-8;
  filter: url(#goo-filter);
}
.gd-b { animation: goo-slide 2s $ease-spring infinite; }
@keyframes goo-slide {
  0%, 50%, 100% { transform: translateX(0); }
  25% { transform: translateX(-68px); }
  75% { transform: translateX(68px); }
}

03Morphing blob

What moves

A cushion-shaped blob squirms without pause by stepping through eight border-radius values while rotating 90 degrees between each. The four radius pairs return to their starting values exactly on the 2-second loop, so the seam is invisible.

Morphing blob
Open in a new tab

03 · Morphing blob — Measured area 2.206% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

border-radiusrotate$duration

What to change

The static base keeps a blob shape too, so it still looks right when animation is off.

.mb-blob {
  width: 112px;
  height: 112px;
  border-radius: 58% 42% 43% 57% / 45% 58% 42% 55%;
  background: $color;
}
.mb-blob.is-demo { animation: mb-morph $duration linear infinite; }
@keyframes mb-morph {
  0%   { border-radius: 58% 42% 43% 57% / 45% 58% 42% 55%; transform: rotate(0deg) scale(1); }
  25%  { border-radius: 45% 55% 60% 40% / 52% 42% 58% 48%; transform: rotate(90deg) scale(1.06); }
  50%  { border-radius: 57% 43% 40% 60% / 55% 47% 53% 45%; transform: rotate(180deg) scale(.96); }
  75%  { border-radius: 42% 58% 57% 43% / 48% 55% 45% 52%; transform: rotate(270deg) scale(1.04); }
  100% { border-radius: 58% 42% 43% 57% / 45% 58% 42% 55%; transform: rotate(360deg) scale(1); }
}

04Squish ball

What you see

The ball drops, splats flat to .55 height on impact, holds a beat, then rebounds on its own elasticity. transform-origin sits at the bottom center so the ball's underside stays glued to the floor during the squash, and a shadow ellipse shrinks and fades while the ball is high.

Squish ball
Open in a new tab

04 · Squish ball — Measured area 5.947% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateYscale(1.28, .55)transform-origin

Where to look in the code

The fall uses an accelerating cubic-bezier(.45, 0, .8, .6) for a sense of gravity.

.sq-ball {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  border-radius: 50%;
  background: $color;
  transform-origin: 50% 100%;
}
.sq-ball.is-demo { animation: sq-bounce 1s cubic-bezier(.45, 0, .8, .6) infinite; }
@keyframes sq-bounce {
  0%   { transform: translateY(-98px) scale(1, 1); }
  55%  { transform: translateY(0) scale(1, 1); }
  68%  { transform: translateY(0) scale(1.28, .55); }
  80%  { transform: translateY(0) scale(.92, 1.08); }
  100% { transform: translateY(-98px) scale(1, 1); }
}

05Orbit dots

What happens on screen

Three differently sized dots share one center and orbit on radii of 36, 52 and 68px. The smaller the dot, the faster the angular speed (1s versus 2s), which gives a planetary sense of depth, and the three start 120 degrees apart so they never bunch up.

Orbit dots
Open in a new tab

05 · Orbit dots — Measured area 11.261% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

rotatetransform-origin$duration

How to read the code

What rotates is each dot itself, not a big arm box — the reason is in the trap section below.

.od-s {                       // small dot: radius 52
  top: 26px;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  transform-origin: 50% 58px; // distance from dot to system center
  animation: ob-spin-a 1s linear infinite;
}
@keyframes ob-spin-a {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

06Liquid fill circle

What moves

Water rises inside a rounded ring while the surface itself comes from a big rounded square (radius 36%) rotating in place. The rise moves only the translate property so it never fights the rotation on transform, and the square's corners sweep a ripple across the surface as it turns.

Liquid fill circle
Open in a new tab

06 · Liquid fill circle — Measured area 3.84% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

translate: 0 -60pxrotateoverflow: hidden

What to change

The 2-second fill-and-drain loop keeps long waits from feeling stuck.

.lq-tube {
  position: relative;
  width: 150px;
  height: 150px;
  border: 4px solid $subject-ink;
  border-radius: 50%;
  overflow: hidden;
}
.lq-water {
  position: absolute;
  top: 100%;
  left: calc(50% - 55px);
  width: 110px;
  height: 110px;
  border-radius: 36%;
  background: $color;
  animation: lq-wave 2s linear infinite, lq-rise $duration $ease-spring infinite;
}
@keyframes lq-wave { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lq-rise {
  0%   { translate: 0 0; }
  50%  { translate: 0 -60px; }
  100% { translate: 0 0; }
}

07Count-up number

What you see

With zero JavaScript, an integer variable --n registered through @property climbs from 0 to 100 and prints itself via counter(). A thin conic-gradient ring reads the same variable, so the digits and the gauge can never drift apart.

Count-up number
Open in a new tab

07 · Count-up number — Measured area 9.245% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

@propertycounter()linear

Where to look in the code

The number itself is aria-hidden — it's decoration — while a visually hidden label carries role="status", so assistive tech announces the progress from that label instead of reading digits one by one.

@property --n {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
.cu-num {
  counter-reset: n var(--n);
}
.cu-num::after { content: counter(n) "%"; }
.cu-box.is-demo { animation: cu-count $duration linear infinite; }
@keyframes cu-count {
  from { --n: 0; }
  to   { --n: 100; }
}

08Cube stack

What happens on screen

Four squares pop into their cells in grid reading order — top-left, top-right, bottom-left, bottom-right — at 120ms intervals, then a beat later all four settle together. The entrance (inner cube scale) and the landing (outer cell translateY) are split across two nested elements so one transform never overwrites the other.

Cube stack
Open in a new tab

08 · Cube stack — Measured area 13.051% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

scalestagger$easing

How to read the code

It maps naturally onto a screen that loads one module at a time.

.cs-cell { animation: cs-settle $duration $ease-pop infinite; }
.cs-cube  { animation: cs-pop $duration $ease-pop infinite backwards; }
.cs-cell:nth-child(2) .cs-cube { animation-delay: 120ms; }
.cs-cell:nth-child(3) .cs-cube { animation-delay: 240ms; }
.cs-cell:nth-child(4) .cs-cube { animation-delay: 360ms; }
@keyframes cs-pop {
  0%       { transform: scale(0); opacity: 0; }
  16%      { transform: scale(1.18); opacity: 1; }
  22%, 68% { transform: scale(1); opacity: 1; }
  90%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes cs-settle {
  0%, 60%  { transform: translateY(0); }
  70%      { transform: translateY(8px); }
  80%, 100% { transform: translateY(0); }
}

09Curtain reveal

What moves

This one stages the moment loading ends. Two curtain panels push outward to uncover the content placeholder behind them (title bar, text lines, thumbnail), stay open for a beat, then draw closed and repeat.

Curtain reveal
Open in a new tab

09 · Curtain reveal — Measured area 29.278% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateXoverflow: hidden$duration

What to change

In production you open the curtains when loading finishes and remove the class, and it doubles as a page-transition cover.

.ct-left  { left: 0;  background: $color; }
.ct-right { right: 0; background: $subject-pink; }
.ct-scene.is-demo .ct-left  { animation: ct-open-left $duration $ease-spring infinite; }
.ct-scene.is-demo .ct-right { animation: ct-open-right $duration $ease-spring infinite; }
@keyframes ct-open-left {
  0%, 12%   { transform: translateX(0); }
  38%, 72%  { transform: translateX(-101%); }
  94%, 100% { transform: translateX(0); }
}
@keyframes ct-open-right {
  0%, 12%   { transform: translateX(0); }
  38%, 72%  { transform: translateX(101%); }
  94%, 100% { transform: translateX(0); }
}

Where it breaks — a rotating box overflows the phone screen

The first version of item 05 rotated a big square arm holding the dots, the way most orbit loaders are built. It looked fine on desktop, then the 320px phone-width check flagged a vertical overflow: the dots are tiny, but a 168px square rotated to 45 degrees has a bounding box the size of its diagonal (about 237px), and scroll-height math counts that inflated box. Measured directly, body reported 218px against a 200px viewport — and neither overflow: hidden nor clip stops that count. The fix is to shrink what rotates: each dot orbits in place with its own transform-origin pinned to the system center, so the bounding box stays inside the circle the dot traces (138px across). Compare item 01, whose ring is already a circle and therefore never grows when it spins. The archive asks for a password when you unpack it; The waiting that happens up in a menu bar instead is the mix 9 mega menu ui patterns deals with. Type 3eqz6dw4 and all nine folders open as they are. Item 02 got the same treatment for a different crime — the blur+contrast filter tinted every dot edge red on yellow, and switching to an alpha-only SVG matrix cleaned it up completely.

Accessibility

All nine loaders fall back to animation: none under prefers-reduced-motion: reduce, and each leaves a meaningful static shape rather than vanishing: 03 keeps the blob silhouette, 07 shows a full ring at 100%, 09 stays with curtains open, 04 rests mid-air. Loaders are decoration, so everything except 07 is aria-hidden="true" for assistive tech; 07 instead carries role="status" with a "Loading" label so progress gets announced. Because these loop forever, they meet WCAG 2.2.2 pause, stop, hide only if you remove the loader from the screen when loading actually ends. The media query follows the OS motion setting; MDN documents the details.

FAQ

Can these loading screen design examples be CSS only?

Yes — all nine here ship with zero lines of JavaScript, and even the 07 count-up runs on @property inside plain CSS. The only script you add in production is one line that toggles the .is-loading class when waiting starts and ends. For the classics, see 9 CSS loading spinners and the skeleton screens in skeleton loading UI. The wait that lives inside one button is what item 09 of 9 css button design ideas shows.

How do I recolor these to match my brand?

Change the single $color variable at the top of each demo's SCSS. Item 01 also blends two helper pastels into its gradient ($subject-lilac, $subject-sky), so adjust those two alongside it. The React port takes the same values as props.

Should I show a percentage when I don't know the real progress?

If you don't know, don't fake it — a counter stuck at 90 makes the wait feel longer, not shorter. Use an open-ended indicator like 01, 02 or 03 when timing is unknown, and reserve 07 for cases with real progress such as uploads. When all you need is the ending moment, 09 is the right tool.

Enter the archive password

The password is inside this article. You will find it as you read.