What it is
Loader shows progress or waiting feedback on the screen.What it’s best for
Use it when the user needs reassurance that something is happening, or when a short transition makes the experience feel more intentional.When to use it
- Simulate personalization while the next screen prepares
- Show “Preparing your plan”
- Show “Analyzing your profile”
- Add a brief transition after a completed step
When not to use it
- Do not add a loader when the next step is immediate.
- Do not let a decorative loader replace real progress communication if the wait is meaningful.
How to add it in the dashboard
- Open the screen in the dashboard.
- Add Loader from the Components panel.
- Select it on the canvas.
- In the properties panel, choose the style, colors, timing, and optional progress text.
- Pair it with clear supporting copy so users understand what is happening.
Key parameters
| Parameter | What it changes | When to adjust it |
|---|---|---|
| Style | Switches between different loader looks | Use the style that best matches the tone of the screen |
| Progress color | Changes the active part of the loader | Use it to match the brand and improve visibility |
| Background color | Changes the inactive track or surrounding part | Adjust it when contrast feels too low |
| Thickness | Changes how bold the loader appears | Increase it when the loader should feel more prominent |
| Corner radius | Softens linear loader shapes | Use it for a more polished look |
| Duration | Controls how long the progress animation runs | Adjust it to match the intended pacing |
| Start delay | Adds a pause before progress begins | Use it when the screen needs a softer transition |
| Progress text | Shows a visible progress message or percentage | Use it when users benefit from extra reassurance |
| Progress text style | Changes the appearance of the loader text | Use it to keep the message readable and aligned with the layout |
Example use cases
- A short “Building your workspace” interstitial before the final dashboard preview
- A personalized recommendation screen that briefly shows analysis progress
- A transition between a questionnaire and a tailored result
Best practices
- Always explain what the user is waiting for.
- Keep wait-state screens visually simple.
- Use loaders to build confidence, not to create unnecessary delay.
Common mistakes
- Showing a loader with no explanation
- Keeping the user waiting longer than necessary
- Over-designing the loader so it becomes the main attraction