Show how long things take. This set has bars with success and error states, a four step tracker, ring and dot spinners in three sizes and skeleton loaders.

What is included

• A progress bar with three status variants
• A four step progress tracker
• Ring and dot spinners in S, M and L
• Card, list and text skeleton loaders
• Usage tips

Where to use it

Use it for uploads, forms, checkout and any wait.

Design notes

This progress bars and loading spinners follows a simple rule: Real components save time because you change a property and the whole set updates. Rename the variants to match your design system and connect the colors to your own styles. It includes a progress bar with three status variants, a four step progress tracker, ring and dot spinners in s, m and l, so you can start from a finished layout and change only what you need.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. Fonts are free on Google Fonts, and every color can be changed from the fill panel. You also get card, list and text skeleton loaders and usage tips.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. The text uses Plus Jakarta Sans and a few free Google Fonts. Install them first so the text looks the same.

Light version

This listing is the light version. The dark version is listed separately.