# Matrix Bars (`.sds-loader-matrix`)

Matrix Bars — loader animation. Loaders animation in SDS Motion Forge v5.0.0. It loops continuously as soon as the class is applied.

- Page: https://sds-motion-forge.netlify.app/animations/loader-matrix/
- Category: Loaders (https://sds-motion-forge.netlify.app/categories/loaders/)
- Animated properties: height, opacity
- Compositor-only: no
- Needs child elements: yes
- Needs per-character spans: no
- JavaScript: none required

## Use it

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

<span class="sds-loader-matrix"><span></span><span></span><span></span><span></span><span></span></span>
```

## 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.

## Related

- [Infinity](https://sds-motion-forge.netlify.app/animations/loader-infinity/)
- [Isocube](https://sds-motion-forge.netlify.app/animations/loader-isocube/)
- [Liquid Ring](https://sds-motion-forge.netlify.app/animations/loader-liquid-ring/)
- [Metronome](https://sds-motion-forge.netlify.app/animations/loader-metronome/)
- [Morph](https://sds-motion-forge.netlify.app/animations/loader-morph/)
- [Morph Geo](https://sds-motion-forge.netlify.app/animations/loader-morph-geo/)