Dark Theme Loader

A pure-CSS loader with spin, pulse and fade effects, animating only GPU-friendly properties.

Community animation · MIT License

What PasteMotion changed

Customisable properties (--accent) lifted by PasteMotion; original values kept as fallbacks.
Reduced-motion fallback added by PasteMotion.

WidthFull

Code

index.html

<!-- © 2023 Uiverse.io · MIT License -->
<div class="loading-container">
  <div class="loader">
    <div class="spinner"></div>
  </div>
</div>

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) on .loading-container to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.