Animated icons

An animated icon sits before the text. Pick one with icon="…".

spinner (default)

dots

bars

pulse

sparkle

orbit

globe

gear

none

<fun-loader icon="sparkle"></fun-loader>

icon	Looks like	Suits
spinner (default)	A ring with a gap, rotating	Anything
dots	Three dots bouncing in turn	Chat, typing-style waits
bars	Three bars rising and falling in turn	Data, audio, finance
pulse	A dot that grows and fades out	Calm or sensitive moments, such as payments
sparkle	A ✦ that twinkles and turns	AI and creative tools
orbit	Three dots circling in 3D, larger in front and fading behind	AI answers, long waits
globe	A globe turning, its meridians sliding across	Searching the web, translation, sending things abroad
gear	A gear whose turns speed up and slow down, like a machine cycling	Processing, settings, builds and reports
none	No icon, text only	Inline text, or when you have your own spinner

An unknown name falls back to spinner, so a typo never leaves an empty gap.

To show the icon without any text, add icon-only. For the opposite, text without an icon, use icon="none".

Size and color

The icon is 1em square (orbit is a little wider, 1.3em), so it scales with the font size. It uses the text color unless you set --fun-loader-icon-color:

fun-loader {
  font-size: 1.25rem;
  --fun-loader-icon-color: #7c5cff;
}

More in Styling.

Motion

The icon stops while paused is set. When someone has asked their system for reduced motion, the icon fades gently in and out instead of spinning or bouncing. orbit keeps its three dots spread out while it fades.