Loading…
Progress Samples
This one is pretty straightforward
% FinishedIndeterminateState Dependent
— Determinate
A numeric value represents completion. The bar fills from 0–100. (Uses
"value" prop.)
Uploading catalogTip: set
"value" to any number between 0 and 100.When "value" changes, the indicator animates smoothly.Auto progress
Toggle to let it run automatically.
Speed (ms)
Interval between increments.
Made by AP— Indeterminate
Omit
"value" while waiting for an unknown duration (e.g., network).Fetching recommendations…Switch to determinate once you know the total or percentage.
IndeterminateLoading patterns
— List & States
Style rows differently to communicate status. (Customized with utility classes.)
Task
Progress
Import productsWarning15%
Optimize imagesSuccess55%
Generate sitemapError83%
Pattern examplesList & States