Progress

Used to visually represent the state of completion of a task or process

Installation

import { CircularProgress } from "@octopusdeploy/design-system-components"

import { LinearProgress } from "@octopusdeploy/design-system-components"

Source code

Published on GitHub

Live demo (Circular)

Published on Storybook

Component Package

Published on npm

Live Demo (Linear)

Published on Storybook)

Properties

Types of Progress Indicators

Small


                                                        
                                                        
                                                            <CircularProgress size="small" />

Large


                                                        
                                                        
                                                            <CircularProgress size="large" />

Indeterminate


                                                        
                                                        
                                                            <LinearProgress variant="indeterminate" show={true} />

Determinate


                                                        
                                                        
                                                            <LinearProgress variant="determinate" show={true} value="50" />