Yellow Dark Loader
Loaders · @LightAndy1
- GPU-friendly
- No JS
Spinning Fading Loader
A pure-CSS loader with spin, fade and SVG effects, animating only GPU-friendly properties. Created by catraco on Uiverse.io.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 767 B gzip
Created by @catraco on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent, --speed) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Spinning Fading Loader" by catraco on Uiverse.io · MIT License · https://uiverse.io/catraco/green-crab-61 -->
<div class="loader">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 32C28.7 32 0 60.7 0 96v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm48 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM64 288c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V352c0-35.3-28.7-64-64-64H64zm280 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm56 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"></path></svg>
<span></span>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. PasteMotion has already scoped any global rules to the element.
- Adjust the custom properties (--accent, --speed) on .loader to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Circle Spinning Loader
Loaders · @Abrar-Hussain1
- GPU-friendly
- No JS
- Reduced-motion ready
Dark Theme Loader
Loaders · @BlagaDavid74257
- GPU-friendly
- No JS
- Reduced-motion ready
Rotate Spin Loader
Loaders · @sonex-ICB
- GPU-friendly
- No JS
Cube 3D Loader
Loaders · @jeremyssocial
- GPU-friendly
- No JS
- Reduced-motion ready
Red Gradient Loader
Loaders · @Zadrus
- GPU-friendly
- No JS