Rotate Spin Loader
Loaders · @sonex-ICB
- GPU-friendly
- No JS
Anime Pulsing Loader
A pure-CSS loader with pulse, fade and SVG effects, animating only GPU-friendly properties. Created by Tsiangana on Uiverse.io.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1.2 KB gzip
Created by @Tsiangana on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent, --color-2, --speed) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Anime Pulsing Loader" by Tsiangana on Uiverse.io · MIT License · https://uiverse.io/Tsiangana/mighty-grasshopper-37 -->
<div class="loader">
<svg width="200" height="200">
<circle
class="traco"
cx="100"
cy="100"
r="70"
fill="transparent"
stroke="#ffe71c"
stroke-width="9"
stroke-dasharray="35 20"
transform="rotate(31 100 100)"
></circle>
</svg>
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
<div class="p5"></div>
<div class="p6"></div>
<div class="p7"></div>
<div class="p8"></div>
<div class="circle">
<div class="content">
<div class="eyes">
<div class="eye-left"></div>
<div class="eye-right"></div>
</div>
<div class="nouse"></div>
<div class="mouth"></div>
<div class="teeth">
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
<div class="tooth"></div>
</div>
</div>
</div>
</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, --color-2, --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
Cube 3D Loader
Loaders · @jeremyssocial
- GPU-friendly
- No JS
- Reduced-motion ready
Circle Spinning Loader
Loaders · @Abrar-Hussain1
- GPU-friendly
- No JS
- Reduced-motion ready
Yellow Dark Loader
Loaders · @LightAndy1
- GPU-friendly
- No JS
Book 3D Loader
Loaders · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Spinning Pulsing Loader
Loaders · @KhaledMatalkah
- GPU-friendly
- No JS
- Reduced-motion ready