Progress indicators are used to express a specified wait time or to display the length of a process in order to inform users. All progress indicators in Lumen Labs are determinate, meaning that they indicate a measured period of time within the system, and communicate that data/time back to users.
🎭 Types
Process: The process progress indicator is used to inform users of the state of an internal process that takes a period of time. This loader is used for wait times where the user cannot (or is not expected to) interact with the UI, and thus this indicator changes automatically without user intervention.
Step: The step progress indicator is used to inform users of the upcoming/current steps in a multi-step process within a product. Users are expected to perform an action within the UI in order to change this progress indicator. This indicator is ideal for processes like forms.
File: The file progress indicator is used to inform users about the state of a file load time. This can be used when uploading, downloading or otherwise interacting with a file, within a product. Users can stop the file operation (using the stop button) but are otherwise not expected to interact with the UI for the indicator to change.
Max value indicates the total value of the progress element.
value
integer
'default_val'
Indicates the value of completion on the progress indicator. Must be a floating point between 0 and the max. value. For ongoing tasks (i.e. progress indicators without indication of time till completed) no value or max attribute is added.
🎯 Usage
🎭 Types
Process: The process progress indicator is used to inform users of the state of an internal process that takes a period of time. This loader is used for wait times where the user cannot (or is not expected to) interact with the UI, and thus this indicator changes automatically without user intervention.
Step: The step progress indicator is used to inform users of the upcoming/current steps in a multi-step process within a product. Users are expected to perform an action within the UI in order to change this progress indicator. This indicator is ideal for processes like forms.
File: The file progress indicator is used to inform users about the state of a file load time. This can be used when uploading, downloading or otherwise interacting with a file, within a product. Users can stop the file operation (using the stop button) but are otherwise not expected to interact with the UI for the indicator to change.
🫀 Anatomy
![COMPONENT_ANATOMY] (https://user-images.githubusercontent.com/79470291/167497500-11bf7880-9735-40ae-9f37-f441ea3b817b.png)
Spacing, Sizing & Alignment:
Process - Vertical: (height: 30px; spacing: 8px & 4px)
Process - Horizontal: (width: 30px; spacing: 4px)
Step: (height: 30px; spacing: 4px; font-size: 18pt )
Form: (height: 64px; width: 496px )
💟 Icons Used
🔗 Zeplin Link
🔢 Attributes
max
integer
'1'
value
integer
'default_val'
🔍 Design Preview