Progress.js
4.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Progress,
} from 'reactstrap';
import Widget from '../../../components/Widget';
const ProgressExamples = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Progress</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Progress</h1>
<Row>
<Col xs={12} md={6}>
<Widget
title={<h5>Progress <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>
Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.
</p>
<Progress className="mb-sm" value="25" />
<Progress className="mb-sm" value="50" />
<Progress className="mb-sm" value="75" />
<Progress value="100" />
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Backgrounds</h5>}
close collaple
>
<p>
Use background utility classes to change the appearance of
individual progress bars.
</p>
<Progress className="mb-sm" value="25" color="info" />
<Progress className="mb-sm" value="50" color="warning" />
<Progress className="mb-sm" value="75" color="danger" />
<Progress value="100" color="success" />
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Labels</h5>}
close collapse
>
<p>
Add labels to your progress bars by placing text within the <code><Progress></code>
</p>
<Progress className="mb-sm" value="25">25%</Progress>
<Progress className="mb-sm" value="100" color="danger">Something was wrong!</Progress>
<Progress value="100" color="success">Completed!</Progress>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Size</h5>}
close collapse
>
<p>
We only set a height value on the <code><Progress></code>, so if you change that value the inner
bar will automatically resize accordingly. Also <code>.progress-sm</code> is available.
</p>
<Progress className="progress-sm mb-sm" value="25" color="dark">25%</Progress>
<Progress className="mb-sm" value="50" color="gray">50%</Progress>
<Progress value="75" color="secondary" style={{ height: '30px' }}>75%</Progress>
</Widget>
</Col>
<Col xs={12}>
<Widget
title={<h5><span className="fw-semi-bold">Striped</span> Progress</h5>}
close collapse
>
<Row>
<Col xs={12} md={6}>
<p>
Add <code>striped</code> property to any <code><Progress></code> to
apply a stripe via CSS gradient over the progress bar’s background color.
</p>
<Progress striped className="mb-sm" value="10" />
<Progress striped className="mb-sm" value="25" color="success" />
<Progress striped className="mb-sm" value="50" color="info" />
<Progress striped className="mb-sm" value="75" color="warning" />
<Progress striped value="100" color="danger" />
</Col>
<Col xs={12} md={6}>
<p>
The striped gradient can also be animated. Add <code>animated</code> property
to <code><Progress></code> to animate the stripes right to left via CSS3 animations.
</p>
<Progress animated striped className="mb-sm" value="10" color="danger" />
<Progress animated striped className="mb-sm" value="25" color="warning" />
<Progress animated striped className="mb-sm" value="50" color="info" />
<Progress animated striped className="mb-sm" value="75" color="success" />
<Progress animated striped value="100" />
</Col>
</Row>
</Widget>
</Col>
</Row>
</div>
);
export default ProgressExamples;