{% extends "_base.html.jinja" %} {% set page_title = "Loaders | move.gl" %} {% set body_class = "page-loaders" %} {% block content %}

🔄 Loaders

A comprehensive collection of CSS loading animations. All loaders use greyscale colors for visibility on any background. Each card shows the loader preview and the HTML code needed to implement it.

{# Spinners Section #}

🌀 Spinners

Classic rotating spinner animations

spinner

<div class="loader loader--spinner"></div>

spinner-dots

<div class="loader loader--spinner-dots"></div>

ring

<div class="loader loader--ring"></div>

dual-ring

<div class="loader loader--dual-ring"></div>

windmill

<div class="loader loader--windmill"></div>

chase

<div class="loader loader--chase"></div>
{# Circles Section #}

⭕ Circles

Circular loading animations with various effects

circle-spinner

<div class="loader loader--circle-spinner"></div>

circle-pulse

<div class="loader loader--circle-pulse"></div>

circle-ripple

<div class="loader loader--circle-ripple"></div>

circle-clip

<div class="loader loader--circle-clip"></div>

circle-clip-dual

<div class="loader loader--circle-clip-dual"></div>

circle-dual

<div class="loader loader--circle-dual"></div>

circle-triple

<div class="loader loader--circle-triple"></div>

circle-nested

<div class="loader loader--circle-nested"></div>

circle-dot

<div class="loader loader--circle-dot"></div>

circle-notch

<div class="loader loader--circle-notch"></div>

circle-orbit

<div class="loader loader--circle-orbit"></div>
{# Dots Section #}

⚫ Dots

Animated dot patterns and effects

dots

<div class="loader loader--dots"></div>

dots-bounce

<div class="loader loader--dots-bounce"></div>

dots-fade

<div class="loader loader--dots-fade"></div>

dots-grow

<div class="loader loader--dots-grow"></div>

dots-wave

<div class="loader loader--dots-wave"></div>

ellipsis

<div class="loader loader--ellipsis"></div>
{# Bubbles Section #}

🫧 Bubbles

Bubble and sphere animations

bubble-expand

<div class="loader loader--bubble-expand"></div>

bubble-rotate

<div class="loader loader--bubble-rotate"></div>

bubble-flip

<div class="loader loader--bubble-flip"></div>

bubble-collision

<div class="loader loader--bubble-collision"></div>

bubble-dots-bounce

<div class="loader loader--bubble-dots-bounce"></div>

bubble-dots-flash

<div class="loader loader--bubble-dots-flash"></div>

bubble-dots-pulse

<div class="loader loader--bubble-dots-pulse"></div>

bubble-dots-rotate

<div class="loader loader--bubble-dots-rotate"></div>
{# Bars Section #}

📊 Bars

Bar and equalizer animations

bars

<div class="loader loader--bars"></div>

bar-wave

<div class="loader loader--bar-wave"></div>

bar-pulse

<div class="loader loader--bar-pulse"></div>

bar-bounce

<div class="loader loader--bar-bounce"></div>

bar-equalizer

<div class="loader loader--bar-equalizer"></div>

bar-expand

<div class="loader loader--bar-expand"></div>

bar-shrink

<div class="loader loader--bar-shrink"></div>

bar-flash

<div class="loader loader--bar-flash"></div>

bar-reveal

<div class="loader loader--bar-reveal"></div>

bar-matrix

<div class="loader loader--bar-matrix"></div>

bar-sound-wave

<div class="loader loader--bar-sound-wave"></div>

wave-bar

<div class="loader loader--wave-bar"></div>
{# Progress Section #}

📈 Progress

Progress bars and indicators

progress

<div class="loader loader--progress"></div>

progress-indeterminate

<div class="loader loader--progress-indeterminate"></div>

progress-circle

<div class="loader loader--progress-circle"></div>

progress-dots

<div class="loader loader--progress-dots"></div>

progress-fill

<div class="loader loader--progress-fill"></div>

progress-gradient

<div class="loader loader--progress-gradient"></div>

progress-pulse

<div class="loader loader--progress-pulse"></div>

progress-segments

<div class="loader loader--progress-segments"></div>

progress-split

<div class="loader loader--progress-split"></div>

progress-stripe

<div class="loader loader--progress-stripe"></div>

progress-stripe-fill

<div class="loader loader--progress-stripe-fill"></div>
{# Rectangles Section #}

🟦 Rectangles

Square and rectangle based animations

square

<div class="loader loader--square"></div>

cube

<div class="loader loader--cube"></div>

rect-alternate

<div class="loader loader--rect-alternate"></div>

rect-diamond

<div class="loader loader--rect-diamond"></div>

rect-dual

<div class="loader loader--rect-dual"></div>

rect-expand

<div class="loader loader--rect-expand"></div>

rect-fill

<div class="loader loader--rect-fill"></div>

rect-flip

<div class="loader loader--rect-flip"></div>

rect-morph

<div class="loader loader--rect-morph"></div>

rect-nested

<div class="loader loader--rect-nested"></div>

rect-shrink

<div class="loader loader--rect-shrink"></div>

rect-stepped

<div class="loader loader--rect-stepped"></div>

rect-walk

<div class="loader loader--rect-walk"></div>

folding

<div class="loader loader--folding"></div>

flip-card

<div class="loader loader--flip-card"></div>
{# Pulse & Ripple Section #}

💫 Pulse & Ripple

Pulsating and ripple effect animations

pulse

<div class="loader loader--pulse"></div>

ripple

<div class="loader loader--ripple"></div>

bounce

<div class="loader loader--bounce"></div>

bouncing-ball

<div class="loader loader--bouncing-ball"></div>

heartbeat

<div class="loader loader--heartbeat"></div>

gradient

<div class="loader loader--gradient"></div>

morph

<div class="loader loader--morph"></div>
{# Text Loaders Section #}

📝 Text

Text-based loading animations

typing

<div class="loader loader--typing"></div>

text-typing

<div class="loader loader--text-typing" data-text="Loading"></div>

text-dots

<div class="loader loader--text-dots" data-text="Loading"></div>

text-bounce

<div class="loader loader--text-bounce" data-text="LOADING"></div>

text-fade

<div class="loader loader--text-fade" data-text="Loading"></div>

text-fill

<div class="loader loader--text-fill" data-text="LOAD"></div>

text-gradient

<div class="loader loader--text-gradient" data-text="Loading"></div>

text-percentage

<div class="loader loader--text-percentage"></div>

text-pulse

<div class="loader loader--text-pulse" data-text="Loading"></div>

text-shake

<div class="loader loader--text-shake" data-text="Loading"></div>

text-spinner

<div class="loader loader--text-spinner"></div>

text-spotlight

<div class="loader loader--text-spotlight" data-text="Loading"></div>

text-wave

<div class="loader loader--text-wave" data-text="Loading"></div>

brackets

<div class="loader loader--brackets"></div>
{# Skeleton Loaders Section #}

💀 Skeleton

Placeholder loading effects for content

skeleton-shimmer

<div class="loader loader--skeleton-shimmer"></div>

skeleton-pulse

<div class="loader loader--skeleton-pulse"></div>

skeleton-wave

<div class="loader loader--skeleton-wave"></div>

skeleton-fade

<div class="loader loader--skeleton-fade"></div>
{# Graphic Loaders Section #}

🎨 Graphic

Visually distinctive animated loaders

orbit

<div class="loader loader--orbit"></div>

atom

<div class="loader loader--atom"></div>

dna

<div class="loader loader--dna"></div>

infinity

<div class="loader loader--infinity"></div>

star

<div class="loader loader--star"></div>

heart

<div class="loader loader--heart"></div>

wifi

<div class="loader loader--wifi"></div>

gear

<div class="loader loader--gear"></div>
{# Objects Section #}

🎭 Objects

Real-world object inspired loaders

hourglass

<div class="loader loader--hourglass"></div>

clock

<div class="loader loader--clock"></div>

battery

<div class="loader loader--battery"></div>

book

<div class="loader loader--book"></div>

clipboard

<div class="loader loader--clipboard"></div>

coin

<div class="loader loader--coin"></div>

document

<div class="loader loader--document"></div>

envelope

<div class="loader loader--envelope"></div>

search

<div class="loader loader--search"></div>
{# Physics Section #}

⚛️ Physics

Motion-based physics animations

pendulum

<div class="loader loader--pendulum"></div>

seesaw

<div class="loader loader--seesaw"></div>

ping-pong

<div class="loader loader--ping-pong"></div>

rolling-rock

<div class="loader loader--rolling-rock"></div>
{% endblock content %}