html
html
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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="progress">
<svg width="90%" height="100%">
<defs>
<linearGradient id="GradientGray" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#f4f4f4"/>
<stop offset="100%" stop-color="#e1e1e1"/>
</linearGradient>
<linearGradient id="GradientBlue" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#70b3e1"/>
<stop offset="100%" stop-color="#4083b1"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" rx="9" fill="url(#GradientGray)"/>
<rect class="pb-bar" width="20%" height="100%" rx="9" fill="url(#GradientBlue)"/>
<text class="pb-text" text-anchor="middle" x="10%" y="50%" dy=".3em" fill="khaki">20%</text>
</svg>
</div>
<script>
function progressBar(num) {
document.querySelector('rect.pb-bar').setAttribute('width', num +'%');
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
body {
}
.progress {
width: 340px;
height: 20px;
margin: 20px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run