HTML
10
1
<div class="container">2
<p>3
Progress bar with a <code>value</code> attribute. The value is set to 80 out of a max of 100.4
</p>5
<progress max="100" min="0" value="80"></progress>6
<p>7
Progress bar without a value; i.e. in an indeterminate state.8
</p>9
<progress max="100"></progress>10
</div>CSS
54
1
body {2
color: #555;3
font-size: 1.1em;4
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;5
}6
7
.container {8
margin: 40px auto 0;9
width: 90%;10
padding: 1em;11
}12
13
progress {14
display: block;15
margin-bottom: 40px;16
width: 100%;17
height: 50px;18
/* Reset the default appearance */19
20
appearance: none;21
appearance: none;22
appearance: none;23
/* Get rid of default border in Firefox. */24
25
border: none;26
/* For IE10 */27
28
color: #0099CC;29
}30
/* webkit-only styles to change the background color of the progress bar */31
32
progress::progress-bar {33
background-color: #eee;34
border-radius: 2px;35
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;36
}37
38
progress::progress-value {39
background-color: #0099Cc;40
}41
42
progress:indeterminate::progress-bar {43
background-color: #aaa;44
}45
/* Firefox-only styles to change the background color of the value bar */46
47
progress::progress-bar {48
background-color: #0099Cc;49
}50
/* indeterminate state styles */51
52
progress:indeterminate:hover {53
cursor: wait;54
}JS
1
1