HTML5 Progress Bar

By | July 24, 2014

HTML5 Progress Bar will be used to minimize the html coding. <progress> tag is used to make progress bar.

Below is the progress bar syntax and example. The parameter max is the maximum value for the progress bar and parameter value is the percentage out of maximum value.

 

 

1
<progress value="40" max="100"></progress>

Giving appearance of progress[value] as none will able to give css properties to progress bar and progress value.
-webkit-appearance: none; 

CSS Code for Progress Bar

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
<style type="text/css">

progress[value]
{
width: 600px;
height: 120px;
-webkit-appearance: none;
}
/*** Progress Bar ****/
progress[value]::-webkit-progress-bar
{
background-color: #900;
}
progress[value]::-moz-progress-bar
{
background-color: #900;
}

/*** Progress Value ****/
progress[value]::-webkit-progress-value
{
background-color: #ccc;
}
progress[value]::-moz-progress-value
{
background-color: #ccc;
}

</style>

Leave a Reply

Your email address will not be published. Required fields are marked *