Dark Theme Loader
Loaders · @BlagaDavid74257
- GPU-friendly
- No JS
- Reduced-motion ready
Yellow Dark Loader
A pure-CSS loader with spin, fade and SVG effects, animating only GPU-friendly properties. Created by LightAndy1 on Uiverse.io.
- GPU-friendly
- No JS
- Customisable
- 773 B gzip
Created by @LightAndy1 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.
- Element is not visible with reduced motion enabled; reduced-motion badge withheld.
Code
<!-- "Yellow Dark Loader" by LightAndy1 on Uiverse.io · MIT License · https://uiverse.io/LightAndy1/helpless-fireant-0 -->
<div class="loader">
<svg
viewBox="0 0 256 256"
class="star star1"
height="32"
width="32"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
></path>
</svg>
<svg
viewBox="0 0 256 256"
class="star star2"
height="32"
width="32"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
></path>
</svg>
<svg
viewBox="0 0 256 256"
class="star star3"
height="32"
width="32"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
></path>
</svg>
</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.
Related animations
Spinning Fading Loader
Loaders · @catraco
- GPU-friendly
- No JS
- Reduced-motion ready
Rotate Spin Loader
Loaders · @sonex-ICB
- GPU-friendly
- No JS
Circle Spinning Loader
Loaders · @Abrar-Hussain1
- GPU-friendly
- No JS
- Reduced-motion ready
Spinning Pulsing Loader
Loaders · @KhaledMatalkah
- GPU-friendly
- No JS
- Reduced-motion ready
Neumorphism Shadow Loader
Loaders · @Praashoo7
- GPU-friendly
- No JS
- Reduced-motion ready