Loader - Flowboard

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

Wheel Picker Page Indicator