packages/instant/src/components/progress_bar.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import * as React from 'react';

import { ColorOption } from '../style/theme';

import { Container } from './ui/container';

export interface ProgressBarProps {
    percentageDone: number;
}
export const ProgressBar: React.StatelessComponent<ProgressBarProps> = props => (
    <Container padding="20px 20px 0px 20px" width="100%">
        <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
            <Container
                width={`${props.percentageDone}%`}
                backgroundColor={ColorOption.primaryColor}
                borderRadius="6px"
                height="10px"
            />
        </Container>
    </Container>
);