Skip to main content

Progress

A progress bar. The first number found in the label sets the fill value (0–100). A color modifier changes the bar color.

Basic usage​

progress: Uploading 25%
blue progress: Processing 68%
green progress: Done 100%

Color variants​

progress: Default 40%
blue progress: Blue 40%
green progress: Green 40%
red progress: Red 40%
yellow progress: Yellow 40%
purple progress: Purple 40%
gray progress: Gray 40%

In a card layout​

row:
  1/3 card:
    ## In progress
    progress: Uploading 25%
  1/3 card:
    ## Almost done
    blue progress: Processing 68%
  1/3 card:
    ## Complete
    green progress: Done 100%

Reference​

ModifierEffect
blueBlue bar
greenGreen bar
redRed bar
yellowYellow bar
purplePurple bar
grayGray bar

The label is displayed above the bar as text. The numeric value is parsed from the label — include a number (with or without %) to set the fill position. If no number is found, defaults to 50.