Header Ads Widget

Design Progress bar using HTML and CSS with two different ways.

My codding spot May 15, 2021

What is the progress bar?

Progress bar is very important element in website or in computer system. Progress bar is used to show progress of task to the user such as downloading file, Skill measurement, marks obtained, etc.. 

In this post I will describes how to design progress bar using HTML and CSS. Here we will design progress bar with different ways.: 

 (1) Simple progress bar using CSS 

 (2) Progress bar using <progress> element and JavaScript. 

 (3) Animated progress bar 

 (4) Animated gradient progress bar 

Simple progress bar using CSS 


Illustration of progress bar

The structure of progress bar has created using only <div> elements. The basic CSS properties have used for designing progress bar.

Look at the figure above, I have create progress bar using total five nested “<div>” elements. This all “<div>” elements are differentiate by class name.

Steps for progress bar of “Progress of skills “ designing.

1) First, you need “<div>” tag (element) named main which is container for other “<div>” tag. Give background-color to element. Set appropriate height and width.

2) (for HTML skill)Then put another “<div>” tag named container for progress bar. Give this container to white background color. Set height and width and make it corner little bit round. For round corner border-radius property is used.

3) Now, put other “<div>” tag named progress. Set background grey. Set its width 100%.

Set minimum height for this class. With border-radius property makes its corner more round.

4) Lastly add “<div>” element named html for HTML skill.

Give same height as given in progress class. Set background-color blue or green as your choice. And set it width. Here I sets width 70%.

5) For CSS skill set repeat above (2), (3) and (4) steps.

Code for 1st example is given below.


HTML code:-

 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

<!Doctype html>
<html lang="en">
<head>
<title>Progressbar</title>
<meta charset="utf-8">
<link rel="stylesheet" href="progress.css">
</head>
<body>
<div class="main">
<h3>Progress of skill</h3>
<p>HTML</p>
   <div class="container">
      <div class="progress">
       <div class="html"></div>
      </div>
   </div>
<p>CSS</p>
   <div class="container">
      <div class="progress">
        <div class="css"></div>
   </div>
   </div>
</div>
</body>
</html>

CSS code:- 
 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
.main{
width:500px;
height:300px;
background-color:#0F1E00;
}
.container{
position:relative;
width:80%;
height:50px;
background-color:#FFFFFF;
margin:25px;
border-radius:5px;
}
.progress{
position:absolute;
top:12px;
height:25px;
width:100%;
border-radius:10px;
background-color:grey;
}
h3,p{color:mediumseagreen;
padding:5px;
margin:10px;}
.html,.css{
height:25px;
background-color:blue;
border-radius:17px;}
.html{width:80%;}
.css{width:65%;}
Output:-
Progress bar of skills

If you want to add percentage in text form, just add another “<div>” after html and  css classes. Give some css styles. 

Code:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="container">
      <div class="progress">
       <div class="html"><div id="percent">80%</div></div>
      </div>
   </div>
<p>CSS</p>
   <div class="container">
      <div class="progress">
        <div class="css"><div id="percent">65%</div></div>
   </div>
   </div>
</div>
Output:-
This is the 1st way to create progress bar, now moving to another one. 

Progress bar using <progress> element and JavaScript 


Using “<progress>” element, creating progress bar is  not require any other extra element. You are only require “value” and “max” attributes. 
Now why are “value “ and “max” attributes needed? 
“value“ attribute specifies the how much task has been completed. 
“max” attribute specifies  value of task to be completed.
Its default value is “one”.
Both attributes are necessary for creating progress bar. 

Steps for creating progress bar of file downloading. 

1) Instead of using multiple “<div>” tags only use “<progress>” tag in program. 

2) Declare “value” and “max” attributes in “<progress>” element with space. Assign values to attributes. 

Code:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!Doctype html>
<html lang="en">
<head>
<title>Progressbar</title>
<meta charset="utf-8">
</head>
<body>
<h2>The Progress Element</h2>
<p>File downloading</p>
    <progress  value="52" max="100">

    </progress>
</body>
</html>
Output:-
Progress bar using progress element 

This is simple progress bar. This will not show percentage text of completion progress of task. 
If you want to display completion of progress of task use javascript code with “<progress>” element. 

- Add id attribute in “<progress>” tag. Add one “<button>” element after “<progress>” tag. Also assign id attribute to it. 
- Now write javascript code between “<script></script>” tag. Put this “<script>” tag in “<body>“ tag at last. 
- Write function and access “<progress>” element value by “id” attribute using DOM attribute. Assign this value to a variable. 
- Now how to show progress of task completed? 
- You an display value either on “<p>” element or display on button when click on button. 
- Now for display value write : 
document.getElementById(“id name where to display”).innerHTML=variable name where value stored+”%”;
- Call function on “<button>” element using onclick event. 
Here is the code snippet give you proper understanding. 

Code:-

  
 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
<!Doctype html>
<html lang="en">
<head>
<title>Progressbar</title>
<meta charset="utf-8">
<style>
#download{

width:50%;
height:40px;}
#showprogress{
width:50%;
height:30px;
background-color:slateblue;
font-size:16pt;}

</style>
</head>
<body>
<h2>The Progress Element</h2>
<p>File downloading</p>
    <progress id="download"value="52" max="100">

    </progress>
<button onclick="progressing()" id="showprogress">Downloading progress...</button>

<script>
     function progressing()
    {
      var p=document.getElementById("download").value;
document.getElementById("showprogress").innerHTML=p+"%";
    }
</script>
</body>
</html>
Output:-
Progress bar using progress element and JavaScript 

Animated Progress bar

You can also add animation in progress bar design. The animation properties are used to give animation effect.
In following code, when animation start progress bar color changes from red to blue and also skill progress appear from 0 opacity to 0.5 opacity.

HTML code:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!Doctype html>
<html lang="en">
<head>
<title>Progressbar</title>
<link rel="stylesheet" href="animated progress bar.css">
</head>
<body>
<div class="main">
<h3>Progress of skills</h3>
<div class="progress">
<span id="ht">HTML</span>
 <span class="html"></span>
 <p id="percnt">80%</p>
</div>
<div class="progress1">
<span id="cs">CSS</span>
 <span class="css"></span>
 <p id="percnt">60%</p>
</div>
</div>
</body>
</html>

CSS code:-

 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
.main
{
height:250px;
width:auto;
background-color:#aabb99;
margin:5px;
padding:5px;
}
.progress,.progress1
{
position:relative;
top:50px;
height:25px;
width:100%;
border-radius:10px;
background-color:#000000;
}
.progress1
{
top:100px;
}
.html
{
position:absolute;
height:25px;
width:80%;
background-color:#0055ff;
border-radius:30px;
animation-name:prg;
animation-duration:2s;
animation-timing-function:ease-out;
}
@keyframes prg
{
from{width:0%;background-color:#ff0000;},
to{width:80%;background-color:#0000ff;}
}
#ht,#cs
{
position:absolute;
top:-30px;
}
#percnt
{
margin-top:5px;
text-align:right;
color:#bbff55;
animation-name:pr;
animation-duration:11s;
animation-timing-function:ease-out;
}
@keyframes pr
{
0%{opacity:0;},
30%{opacity:0},
60%{opacity:0},
90%{opacity:0},
100%{opacity:0.5}
}
.css
{
position:absolute;
height:25px;
width:60%;
background-color:#0055ff;
border-radius:30px;
animation-name:prgcs;
animation-duration:2s;
animation-timing-function:ease-out;
}
@keyframes prgcs
{
from{width:0%;background-color:#ff0000;},
to{width:60%;background-color:#0000ff;}
}

Output:-



Animated gradient progress bar 

In this progress bar gradient and animation style used togather. The linear gradient is used with four colors. An animation is applied on width and colors. When animation starts width of element increases and color position is changing. When width increases to 80% animation will stop.

HTML code:-

<!DOCTYPE html>
<html>
<head>
<title>progressbar</title>
<link rel="stylesheet" href="gradient_progress.css">
</head>
<body>
<h2>Animated gradient progress bar</h2>
<div class="container">
<div class="prog"></div>
</div>
</body>
</html>

CSS code:-

.container
{
position:relative;
top:5px;
height:30px;
width:100%;
background-color:#cccccc;
}
.prog
{
position:absolute;
top:50%;
transform:translateY(-50%);
margin-left:20px;
height:10px;
width:80%;
background-image:linear-gradient(to right,#190345,#ff5b64,#aad4c8,#6951ae);
animation:progress 5s linear both;
}
@keyframes progress
{
10%{width:10%;background-image:linear-gradient(to right,#6951ae,#190345,#ff5b64,#aad4c8);}
30%{width:50%;background-image:linear-gradient(to right,#aad4c8,#6951ae,#190345,#ff5b64);}
50%{width:70%;background-image:linear-gradient(to right,#ff5b64,#aad4c8,#6951ae,#190345);}
70%{width:80%;background-image:linear-gradient(to right,#190345,#ff5b648,#aad4c8,#6951ae);}
}

Output:-



Conclusion:-

In post we have seen 3 ways to design process bar. 1st is simple one with basic HTML and CSS. In 2nd method progress bar created by using <progress> tag and JavaScript. In 3rd way animation added to progress bar design.
Which one you like? 

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments