AIMRAN
Cargando
HTML + CSSLoaders

3D gyroscope loader

Three rings spin on different axes around a glowing core.

Settings

16px
1x

Code

<div class="uv-lgy" role="status"><span class="sr">Loading</span><i class="r1"></i><i class="r2"></i><i class="r3"></i><i class="co"></i></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Loaders

See all Loaders

Circular spinner

LoadersReact + Motion

Bouncing dots

LoadersReact + Motion

Indeterminate progress bar

LoadersReact + Motion

Skeleton card

LoadersReact + Motion

Square to circle loader

LoadersHTML + CSS

Sliding tiles loader

LoadersHTML + CSS

3D cube loader

LoadersHTML + CSS

Self-drawing triangle

LoadersHTML + CSS

Where to use it

A gyroscope suggests balance and precision, which suits fintech, aerospace, robotics and science products. Three concentric rings rotate on different tilted axes inside a 3D perspective, crossing in front of and behind each other, while a bright core in the middle breathes softly with a glow.

The outer and middle rings use your two colors and the inner ring blends both. Everything runs on CSS 3D transforms with preserve-3d, so it is smooth and light, and the speed control scales all three rings together.