Appearance
ProgressBar
A component for a simple visualization of progress.
Props
color
Bar color
type:
String
default:
primary
values:
primary, secondary, success, danger, info, warning
size
Bar height and the size of typography
type:
String
default:
md
values:
xs, sm, md, lg, xl
inside
Causes that if the percentage/progress is to be shown to be inside the bar
type:
Boolean
default:
false
percent
Decides about displaying the percent/progress value
type:
Boolean
default:
false
striped
Striped style settings instead of a uniform color
type:
Boolean
default:
false
size
required
Progress value
type:
Number
default:
0
animate
Set an animation for the bar
type:
Boolean
default:
false
text
Description/Information what the bar shows
type:
String
default:
''
reverse
If the description/information or progress are to be displayed, they are displayed above the bar by default. The reverse setting causes the display at the bottom. This setting does not matter if we display the percentage of "Inside" set to true.
type:
Boolean
default:
false
Examples
Basic
html
<progress-bar :progress="45" />
1
Percentage
22%
html
<progress-bar :progress="22" percent />
1
With a percentage at the bottom + striped
22%
html
<progress-bar :progress="22" percent reverse striped />
1
Progress inside + animation
75%
html
<progress-bar :progress="75" size="lg" percent inside striped animate />
1
Text at the top
Loading...
html
<progress-bar :progress="45" text="Loading..." color="danger" />
1
In a large size, with the text at the bottom
Installation...
45%
html
<progress-bar
:progress="45"
text="Installation..."
color="success"
size="xl"
reverse
percent
inside
/>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
In sm size, with text and percentage at the bottom
Installation...64%
html
<progress-bar :progress="64" text="Installation..." color="info" size="sm" reverse percent />
1