Bootstrap 5 Progress – Easy, Striped, Animated and Extra

March 2, 2023

121

Progress bar in Bootstrap 5

The progress bar is a helpful part that can be utilized for exhibiting the customers the progress of a course of. For instance, saving information within the database, downloading some assets, checkout course of progress, and so forth.

Bootstrap 5 makes it fairly simpler for the front-end designing/utilization of the progress bars.

It’s possible you’ll create progress bars:

Easy
With labels
Numerous background colours by utilizing background courses
Stripped progress bars
Progress bars with animation and so forth.

See the part under for examples of every and extra with code and output.

Creating easy progress bars

Within the instance under, 5 progress bars are created. Take a look on the code and output. Under is defined how the progress bar is created:

Bootstrap5-progress

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

<!DOCTYPE html>

<html>

<head>

</head>

<h2>Bootstrap 5 Progress</h2>

</div>

<br>

</div>

<br>

</div>

<br>

</div>

<br>

</div>

</physique>

</html>

How did it work?

The outer <div> is given the progress class that signifies the max worth of the progress bar.
The inside <div> is given the progress-bar. That is used to point out the progress to this point.
You may additionally see somewhat inline CSS e.g. fashion=”width: 25%”. You may additionally use customized CSS or utility class there. In that case, with extra worth of the width, extra progress is seen to the consumer by default or different bg-background colours.

Creating varied colour progress bars

By utilizing Bootstrap 5 background colour courses, you might change the fill colour to point out the progress that matches your web site theme.

See the instance the place we utilized varied background courses:

BS5-progress-colors

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

<!DOCTYPE html>

<html>

<head>

</head>

<h2>Bootstrap 5 Progress bar Colours</h2>

<div class=“progress-bar bg-primary” function=“progressbar” aria-valuenow=“3” aria-valuemin=“0” aria-valuemax=“100”>bg-primary</div>

</div>

<br>

<div class=“progress-bar bg-secondary” function=“progressbar” fashion=“width: 15%” aria-valuenow=“15” aria-valuemin=“0” aria-valuemax=“100”>bg-secondary</div>

</div>

<br>

<div class=“progress-bar bg-success” function=“progressbar” fashion=“width: 20%” aria-valuenow=“20” aria-valuemin=“0” aria-valuemax=“100”>bg-success</div>

</div>

<br>

<div class=“progress-bar bg-danger” function=“progressbar” fashion=“width: 40%” aria-valuenow=“40” aria-valuemin=“0” aria-valuemax=“100”>bg-danger</div>

</div>

<br>

<div class=“progress-bar bg-warning” function=“progressbar” fashion=“width: 60%” aria-valuenow=“60” aria-valuemin=“0” aria-valuemax=“100”>bg-warning</div>

</div>

<br>

</div>

<br>

</div>

</physique>

</html>

Setting Customized Colour and width in fashion

This instance reveals setting the progress bar colours of your individual alternative – past the default accessible. In addition to, we’ll set the on-page width of progress bars (below the fashion part earlier than </head> tag).

BS5-progress-color-cus

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

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<!DOCTYPE html>

<html>

<head>

.bg-custom1{

background-color: #80FF80;

width:10%;

}

.bg-custom2{

background-color: #FF8000;

width:20%;

}

.bg-custom3{

background-color: #0080C0;

width:30%;

}

.bg-custom4{

background-color: #804040;

width:40%;

}

.bg-custom5{

background-color: #8080FF;

width:50%;

}

.bg-custom6{

background-color: #808000;

width:60%;

}

.bg-custom7{

background-color: #408080;

width:90%;

}

</fashion>

</head>

<h2 class=“text-danger”>Bootstrap 5 Progress – Customized Colours</h2><br><br>

<div class=“progress-bar bg-custom1” function=“progressbar” aria-valuenow=“3” aria-valuemin=“0” aria-valuemax=“100”>bg-custom1</div>

</div>

<br>

<div class=“progress-bar bg-custom2” function=“progressbar” aria-valuenow=“15” aria-valuemin=“0” aria-valuemax=“100”>bg-custom2</div>

</div>

<br>

<div class=“progress-bar bg-custom3” function=“progressbar” aria-valuenow=“20” aria-valuemin=“0” aria-valuemax=“100”>bg-custom3</div>

</div>

<br>

<div class=“progress-bar bg-custom4” function=“progressbar” aria-valuenow=“40” aria-valuemin=“0” aria-valuemax=“100”>bg-custom4</div>

</div>

<br>

<div class=“progress-bar bg-custom5” function=“progressbar” aria-valuenow=“60” aria-valuemin=“0” aria-valuemax=“100”>bg-custom5</div>

</div>

<br>

<div class=“progress-bar bg-custom6” function=“progressbar” aria-valuenow=“80” aria-valuemin=“0” aria-valuemax=“100”>bg-custom6</div>

</div>

<br>

<div class=“progress-bar bg-custom7” function=“progressbar” aria-valuenow=“90” aria-valuemin=“0” aria-valuemax=“100”>bg-custom7</div>

</div>

</physique>

</html>

You may see seven courses within the part earlier than tag.

There we set the background colour in addition to the width of the progress bar.

An instance of striped progress bars

Simply add the built-in progress-bar-striped class to .progress-bar and BS 5 will apply stripe by way of CSS gradient over the progress bar background colour.

First, see the striped progress bar with BS 5 background colour courses:

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

<html>

<head>

</head>

<h2>Bootstrap 5 Progress bar Striped</h2>

<div class=“progress-bar bg-primary progress-bar-striped” function=“progressbar” aria-valuenow=“3” aria-valuemin=“0” aria-valuemax=“100”>bg-primary progress-bar-striped</div>

</div>

<br>

<div class=“progress-bar bg-secondary progress-bar-striped” function=“progressbar” fashion=“width: 15%” aria-valuenow=“15” aria-valuemin=“0” aria-valuemax=“100”>bg-secondary progress-bar-striped</div>

</div>

<br>

<div class=“progress-bar bg-success progress-bar-striped” function=“progressbar” fashion=“width: 20%” aria-valuenow=“20” aria-valuemin=“0” aria-valuemax=“100”>bg-success progress-bar-striped</div>

</div>

<br>

<div class=“progress-bar bg-danger progress-bar-striped” function=“progressbar” fashion=“width: 40%” aria-valuenow=“40” aria-valuemin=“0” aria-valuemax=“100”>bg-danger progress-bar-striped</div>

</div>

<br>

<div class=“progress-bar bg-warning progress-bar-striped” function=“progressbar” fashion=“width: 60%” aria-valuenow=“60” aria-valuemin=“0” aria-valuemax=“100”>bg-warning progress-bar-striped</div>

</div>

<br>

<div class=“progress-bar bg-info progress-bar-striped” function=“progressbar” fashion=“width: 80%” aria-valuenow=“80” aria-valuemin=“0” aria-valuemax=“100”>bg-info progress-bar-striped</div>

</div>

<br>

<div class=“progress-bar bg-dark progress-bar-striped” function=“progressbar” fashion=“width: 90%” aria-valuenow=“90” aria-valuemin=“0” aria-valuemax=“100”>bg-dark progress-bar-striped</div>

</div>

</physique>

</html>

Striped progress with customized colours

Equally, you might create a striped progress bar for customized colours. Once more, simply add the progress-bar-striped. See an instance and output:

BS5-progress-striped-custom

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

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

<!DOCTYPE html>

<html>

<head>

.bg-custom1{

background-color: #80FF80;

width:10%;

}

.bg-custom2{

background-color: #FF8000;

width:20%;

}

.bg-custom3{

background-color: #0080C0;

width:30%;

}

.bg-custom4{

background-color: #804040;

width:40%;

}

.bg-custom5{

background-color: #8080FF;

width:50%;

}

.bg-custom6{

background-color: #808000;

width:60%;

}

.bg-custom7{

background-color: #408080;

width:90%;

}

</fashion>

</head>

<h2 class=“text-danger”>Bootstrap 5 Progress – Customized Colours</h2><br><br>

<div class=“progress-bar bg-custom1 progress-bar-striped” function=“progressbar” aria-valuenow=“3” aria-valuemin=“0” aria-valuemax=“100”>bg-custom1 striped</div>

</div>

<br>

<div class=“progress-bar bg-custom2 progress-bar-striped” function=“progressbar” aria-valuenow=“15” aria-valuemin=“0” aria-valuemax=“100”>bg-custom2 striped</div>

</div>

<br>

<div class=“progress-bar bg-custom3 progress-bar-striped” function=“progressbar” aria-valuenow=“20” aria-valuemin=“0” aria-valuemax=“100”>bg-custom3 striped striped</div>

</div>

<br>

<div class=“progress-bar bg-custom4 progress-bar-striped” function=“progressbar” aria-valuenow=“40” aria-valuemin=“0” aria-valuemax=“100”>bg-custom4 striped</div>

</div>

<br>

<div class=“progress-bar bg-custom5 progress-bar-striped” function=“progressbar” aria-valuenow=“60” aria-valuemin=“0” aria-valuemax=“100”>bg-custom5 striped</div>

</div>

<br>

<div class=“progress-bar bg-custom6 progress-bar-striped” function=“progressbar” aria-valuenow=“80” aria-valuemin=“0” aria-valuemax=“100”>bg-custom6 striped</div>

</div>

<br>

<div class=“progress-bar bg-custom7 progress-bar-striped” function=“progressbar” aria-valuenow=“90” aria-valuemin=“0” aria-valuemax=“100”>bg-custom7 striped</div>

</div>

</physique>

</html>

An animated striped progress bar instance

For giving CSS 3 animation from left to proper to the striped progress bar, add the progress-bar-animated class.

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

<html>

<head>

</head>

<h2>Bootstrap 5 Progress bar Striped</h2>

<div class=“progress-bar bg-primary progress-bar-striped progress-bar-animated” function=“progressbar” aria-valuenow=“3” aria-valuemin=“0” aria-valuemax=“100”>bg-primary progress-bar-striped + progress-bar-animated</div>

</div>

<br>

<div class=“progress-bar bg-secondary progress-bar-striped progress-bar-animated” function=“progressbar” fashion=“width: 15%” aria-valuenow=“15” aria-valuemin=“0” aria-valuemax=“100”>bg-secondary progress-bar-striped + progress-bar-animated</div>

</div>

<br>

<div class=“progress-bar bg-success progress-bar-striped progress-bar-animated” function=“progressbar” fashion=“width: 20%” aria-valuenow=“20” aria-valuemin=“0” aria-valuemax=“100”>bg-success progress-bar-striped + progress-bar-animated</div>

</div>

<br>

<div class=“progress-bar bg-danger progress-bar-striped progress-bar-animated” function=“progressbar” fashion=“width: 40%” aria-valuenow=“40” aria-valuemin=“0” aria-valuemax=“100”>bg-danger progress-bar-striped + progress-bar-animated</div>

</div>

<br>

<div class=“progress-bar bg-warning progress-bar-striped progress-bar-animated” function=“progressbar” fashion=“width: 60%” aria-valuenow=“60” aria-valuemin=“0” aria-valuemax=“100”>bg-warning progress-bar-striped + progress-bar-animated</div>

</div>

<br>

<div class=“progress-bar bg-info progress-bar-striped” function=“progressbar” fashion=“width: 80%” aria-valuenow=“80” aria-valuemin=“0” aria-valuemax=“100”>bg-info progress-bar-striped</div>

</div>

<br>

<div class=“progress-bar bg-dark progress-bar-striped” function=“progressbar” fashion=“width: 90%” aria-valuenow=“90” aria-valuemin=“0” aria-valuemax=“100”>bg-dark progress-bar-striped</div>

</div>

</physique>

</html>

To see the distinction, we saved the final two progress bars unanimated.

How you can add labels in progress bar?

Although we used it in our above examples, simply to point out it individually, that is how you’ll add the labels within the progress bar. For instance, exhibiting the proportion of progress to the customers.

For that, merely add the textual content to the .progress-bar.

Within the examples above and under, we write textual content earlier than </div> tag:

BS5-progress-labelsl

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

<html>

<head>

</head>

<h2>Bootstrap 5 Progress bar Labels</h2>

<div class=“progress-bar bg-success” function=“progressbar” fashion=“width: 20%” aria-valuenow=“20” aria-valuemin=“0” aria-valuemax=“100”>20% Downloaded</div>

</div>

<br>

</div>

<br>

</div>

<br>

<div class=“progress-bar bg-info” function=“progressbar” fashion=“width: 80%” aria-valuenow=“80” aria-valuemin=“0” aria-valuemax=“100”>80% Accomplished</div>

</div>

<br>

</div>

</physique>

</html>

Making progress bar thicker or thinner (altering peak)

With the intention to change the default peak of the progress bar, you might use the inline fashion CSS.

See the instance the place completely different peak is assigned to 5 press bars.

BS5-progress-height

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

<html>

<head>

</head>

<h2>Bootstrap 5 Progress bar Top</h2>

<div class=“progress-bar bg-success” function=“progressbar” fashion=“width: 20%” aria-valuenow=“20” aria-valuemin=“0” aria-valuemax=“100”>20% Downloaded</div>

</div>

<br>

</div>

<br>

</div>

<br>

<div class=“progress-bar bg-info” function=“progressbar” fashion=“width: 80%” aria-valuenow=“80” aria-valuemin=“0” aria-valuemax=“100”>80% Accomplished</div>

</div>

<br>

</div>

</physique>

</html>

An instance of a number of progress bar (stacked)

You may create one progress with a number of progress bars inside it. Every progress bar in hat progress can have its 100% width. So, you might use this for exhibiting a number of processes/progresses and so forth.

See an instance of a a number of progress bar under:

BS5-progress-multiple

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

<html>

<head>

</head>

<h2>A number of Bars</h2>

</div>

</div>

</physique>

</html>

Reference: https://getbootstrap.com/docs/5.0/elements/progress/

Previous article7 Greatest On-line Programs to Be taught Go or Golang in 2023 – Better of Lot

Next articleDecide LOC with io.Author Ep. 5

Bootstrap 5 Progress – Easy, Striped, Animated and Extra

Progress bar in Bootstrap 5

Creating easy progress bars

Creating varied colour progress bars

Setting Customized Colour and width in fashion

An instance of striped progress bars

Striped progress with customized colours

An animated striped progress bar instance

How you can add labels in progress bar?

Making progress bar thicker or thinner (altering peak)

An instance of a number of progress bar (stacked)

Random Shade Picker In jQuery

Weekly Internet Design & Improvement Information: Collective #549

Weekly Internet Design & Improvement Information: Collective #548

LEAVE A REPLY Cancel reply

Most Popular

Grasp XML Conversion With C++ – MYCPLUS

html – Points with VS Code Reside Server and Chrome

Methods to set Most Gadgets per Consumer – SID-500.COM

Assist enhance go concurrency code – Code Assessment

Recent Comments

ABOUT US

POPULAR POSTS

Grasp XML Conversion With C++ – MYCPLUS

html – Points with VS Code Reside Server and Chrome

Methods to set Most Gadgets per Consumer – SID-500.COM

POPULAR CATEGORY