Cirrus Progress Component


2.0.0-beta.13 years ago4 years agoMinified + gzip package size for @lightspeed/cirrus-progress in KB



Give your users a bit of feedback on how much is left with the Progress component.


  1. Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
  1. Install the component library
yarn add @lightspeed/cirrus-progress
  1. Hook the <ThemeProvider> and the theme in your app.
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
  1. Import Progress and use right away!

React Component


Prop Type Default Description
type 'determinate', 'indeterminate', 'static' 'determinate' Progress variant
current number 0 Current value of the progress
total number 100 Total value of the progress
[property] any any Any extra properties passed will be added to the <Progress> component


See the examples folder for this component.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.