Progress

Default course progress

import React from 'react';

const Example = () => (
    <div>
        <div className="progress">
            <div
                className="progress-bar bg-brand-orange progress-bar--label-right"
                role="progressbar"
                aria-valuenow={54}
                aria-valuemin={0}
                aria-valuemax={100}
                style={{
                    width: '54%',
                }}
            >
                54 %
            </div>
        </div>

        <div className="progress">
            <div
                className="progress-bar bg-brand-orange progress-bar--label-right"
                role="progressbar"
                aria-valuenow={75}
                aria-valuemin={0}
                aria-valuemax={100}
                style={{
                    width: '75%',
                }}
            >
                75 %
            </div>
        </div>
    </div>
);

export default Example;

Progress sizes

import React from 'react';
import { Progress } from 'seduo-ui';

const Example = () => (
    <div>
        <div className="text-center">regular</div>
        <Progress value={50} />
        <div className="text-center">small</div>
        <Progress value={50} className="progress--small" />
    </div>
);

export default Example;

Progress

import React from 'react';
import { Progress } from 'seduo-ui';

const Example = (props) => (
    <div>
        <div className="text-center">0%</div>
        <Progress />
        <div className="text-center">25%</div>
        <Progress value="25" />
        <div className="text-center">50%</div>
        <Progress value={50} />
        <div className="text-center">75%</div>
        <Progress value={75} />
        <div className="text-center">100%</div>
        <Progress value="100" />
        <div className="text-center">Multiple bars</div>
        <Progress multi>
            <Progress bar value="15" />
            <Progress bar color="success" value="30" />
            <Progress bar color="info" value="25" />
            <Progress bar color="warning" value="20" />
            <Progress bar color="danger" value="5" />
        </Progress>
    </div>
);

export default Example;

Properties

Progress.propTypes = {
  multi: PropTypes.bool,
  bar: PropTypes.bool, // used in combination with multi
  tag: PropTypes.string,
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
  max: PropTypes.oneOf([
    PropTypes.string,
    PropTypes.number,
  ]),
  animated: PropTypes.bool,
  striped: PropTypes.bool,
  color: PropTypes.string,
  className: PropTypes.string,
  barClassName: PropTypes.string // used to add class to the inner progress-bar element
};

Progress.defaultProps = {
  tag: 'progress',
  value: 0,
  max: 100,
};

Steps Progress

this progress allows you to visually divide the progress bar according to the individual steps.

import React from 'react';
import { StepsProgress } from 'seduo-ui';

const Example = () => (
    <div>
        <div className="text-center">1 of 5</div>
        <StepsProgress step={1} maxStep={5} />
        <div className="text-center">1 of 5 small</div>
        <StepsProgress step={1} maxStep={5} small />
        <div className="text-center">2 of 4</div>
        <StepsProgress step={2} maxStep={4} />
    </div>
);

export default Example;

Properties

type Props = {|
    step: number,
    maxStep: number,
    className: string,
    small: boolean,
|};

Color Variants

import React from 'react';
import { Progress } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Progress value={2 * 5} />
        <Progress color="success" value="25" />
        <Progress color="info" value={50} />
        <Progress color="warning" value={75} />
        <Progress color="danger" value="100" />
    </div>
);

export default Example;

Labels

import React from 'react';
import { Progress } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Progress value="25">25%</Progress>
        <Progress value={50}>1/2</Progress>
        <Progress value={75}>You're almost there!</Progress>
        <Progress color="success" value="100">
            You did it!
        </Progress>
        <Progress multi>
            <Progress bar value="15">
                Meh
            </Progress>
            <Progress bar color="success" value="30">
                Wow!
            </Progress>
            <Progress bar color="info" value="25">
                Cool
            </Progress>
            <Progress bar color="warning" value="20">
                20%
            </Progress>
            <Progress bar color="danger" value="5">
                !!
            </Progress>
        </Progress>
    </div>
);

export default Example;

Striped

import React from 'react';
import { Progress } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Progress striped value={2 * 5} />
        <Progress striped color="success" value="25" />
        <Progress striped color="info" value={50} />
        <Progress striped color="warning" value={75} />
        <Progress striped color="danger" value="100" />
        <Progress multi>
            <Progress striped bar value="10" />
            <Progress striped bar color="success" value="30" />
            <Progress striped bar color="warning" value="20" />
            <Progress striped bar color="danger" value="20" />
        </Progress>
    </div>
);

export default Example;

Animated

The animated prop also adds the striped prop; there is no need to pass both.

import React from 'react';
import { Progress } from 'seduo-ui';

const Example = (props) => (
    <div>
        <Progress animated value={2 * 5} />
        <Progress animated color="success" value="25" />
        <Progress animated color="info" value={50} />
        <Progress animated color="warning" value={75} />
        <Progress animated color="danger" value="100" />
        <Progress multi>
            <Progress animated bar value="10" />
            <Progress animated bar color="success" value="30" />
            <Progress animated bar color="warning" value="20" />
            <Progress animated bar color="danger" value="20" />
        </Progress>
    </div>
);

export default Example;

Multiple bars / Stacked

import React from 'react';
import { Progress } from 'seduo-ui';

const Example = (props) => (
    <div>
        <div className="text-center">Plain</div>
        <Progress multi>
            <Progress bar value="15" />
            <Progress bar color="success" value="20" />
            <Progress bar color="info" value="25" />
            <Progress bar color="warning" value="20" />
            <Progress bar color="danger" value="15" />
        </Progress>
        <div className="text-center">With Labels</div>
        <Progress multi>
            <Progress bar value="15">
                Meh
            </Progress>
            <Progress bar color="success" value="35">
                Wow!
            </Progress>
            <Progress bar color="warning" value="25">
                25%
            </Progress>
            <Progress bar color="danger" value="25">
                LOOK OUT!!
            </Progress>
        </Progress>
        <div className="text-center">Stripes and Animations</div>
        <Progress multi>
            <Progress bar striped value="15">
                Stripes
            </Progress>
            <Progress bar animated color="success" value="30">
                Animated Stripes
            </Progress>
            <Progress bar color="info" value="25">
                Plain
            </Progress>
        </Progress>
    </div>
);

export default Example;

Max value

import React from 'react';
import { Progress } from 'seduo-ui';

const Example = (props) => (
    <div>
        <div className="text-center">1 of 5</div>
        <Progress value="1" max="5" />
        <div className="text-center">50 of 135</div>
        <Progress value={50} max="135" />
        <div className="text-center">75 of 111</div>
        <Progress value={75} max={111} />
        <div className="text-center">463 of 500</div>
        <Progress value="463" max={500} />

        <div className="text-center">Various (40) of 55</div>
        <Progress multi>
            <Progress bar value="5" max={55}>
                5
            </Progress>
            <Progress bar color="success" value="15" max={55}>
                15
            </Progress>
            <Progress bar color="warning" value="10" max={55}>
                10
            </Progress>
            <Progress bar color="danger" value="10" max={55}>
                10
            </Progress>
        </Progress>
    </div>
);

export default Example;