Loaders animation · .sds-loader-cascade

Cascade Bars

Cascade Bars — loader animation. Add the class .sds-loader-cascade to any element — it loops continuously as soon as the class is applied, with no JavaScript.

Live demo

Demo uses this site's neutral theme; override --sds-primary to match your brand.

Quick start

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/categories/loaders.min.css" />

<span class="sds-loader-cascade"><span></span><span></span><span></span><span></span><span></span></span>

Loads only the loaders bundle (core is included).Prefer one file? Use https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css (all 604 effects).

How it works

Plays as soon as the class is applied, looping continuously. It animates its height and opacity. Timing is fixed for this effect, but you can still override animation-duration/timing-function on the element. The animation runs on the element's direct children — it needs child elements to be visible.

Technical details

Class	`.sds-loader-cascade`
Category	Loaders
Runs	loops continuously, as soon as the class is applied
Animated properties	height, opacity
Compositor-only	No — also animates paint or layout properties
Needs child elements	Yes
Needs per-character spans	No
JavaScript	None required
Keyframes	sds-loaderCascade
Design tokens	n/a
Since	4.0.3

Copy-paste code

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css" />
  </head>
  <body>
    <span class="sds-loader-cascade"><span></span><span></span><span></span><span></span><span></span></span>
  </body>
</html>

React / Next.js

import "@salkomdesignstudio/sds-motion-forge/dist/motion.min.css";

export default function Demo() {
  return (
    <span className="sds-loader-cascade"><span></span><span></span><span></span><span></span><span></span></span>
  );
}

Angular

// angular.json → architect.build.options.styles:
//   "node_modules/@salkomdesignstudio/sds-motion-forge/dist/motion.min.css"
import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  standalone: true,
  template: `
    <span class="sds-loader-cascade"><span></span><span></span><span></span><span></span><span></span></span>
  `,
})
export class DemoComponent {}

Tailwind CSS

/* app.css — Tailwind v4 */
@import "tailwindcss";
@import "@salkomdesignstudio/sds-motion-forge/dist/motion.min.css";

/* then use the class like any other: */
<span class="sds-loader-cascade"><span></span><span></span><span></span><span></span><span></span></span>

Typed React, Angular, Tailwind and Web Components wrappers live in packages/ in the repository and are not yet published to npm; the snippets above need only the CSS.

Related animations

All 100 loaders animations · Installation & usage docs · Custom bundle builder