Bootstrap Snippet Radial Progress Bar using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="number"></div>
<div id="first-half"></div>
<div id="second-half"></div>
<input oninput="updateProgress(this)"
       type="range"
       min="0"
       max="100"
       value="15"
       step="1"
       id="range"
       name="">
</input>
<div id="jumpList">
  <h4>Animate to specific value:</h4>
  <button onclick="animateProgress(30)">30</button>
  <button onclick="animateProgress(50)">50</button>
  <button onclick="animateProgress(80)">80</button>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
#number {
     font-size: 40px;
     line-height: 80px;
     padding: 20px;
     color: black;
     background: white;
     box-sizing: border-box;
     border-radius: 50%;
     box-shadow: 0 0 0 4px black, inset 0 0 0 4px black;
     border: 60px solid white;
     text-align: center;
     width: 240px;
     height: 240px;
     margin: 30px auto;
}
 #first-half, #second-half {
     margin: auto;
     width: 240px;
     height: 240px;
     box-sizing: border-box;
     background: transparent;
     border-radius: 50%;
     transform: rotate(-45deg);
}
 #first-half {
     border: 60px outset blue;
     margin-top: -270px;
}
 #second-half {
     border: 60px inset blue;
     margin-top: -240px;
}
 #range {
     width: 240px;
     margin: 60px auto;
     display: block;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
window.onload = function() {
    updateProgress(document.getElementById("range"));
}
function updateProgress(element) {
    var slider = document.getElementById("range");
    var progress = document.getElementById("number");
    var first = document.getElementById("first-half");
    var secnd = document.getElementById("second-half");
    var angle = -45;
    progress.innerHTML = element.value;
    if (element.value >= element.max / 2) {
        first.style.borderColor = "blue transparent transparent blue";
        secnd.style.borderColor = "transparent blue blue transparent";
        secnd.style.transform = "rotate(-45deg)";
    } else if (element.value < element.max / 2 && element.value >= element.max / 4) {
        first.style.borderColor = "blue transparent transparent transparent";
        secnd.style.borderColor = "transparent blue transparent transparent";
        secnd.style.transform = "rotate(-45deg)";
    } else if (element.value < element.max / 4) {
        first.style.borderColor = "blue transparent transparent transparent";
        secnd.style.borderColor = "transparent white white transparent";
        secnd.style.transform = "rotate(-225deg)";
    }
    angle += (360 / slider.max) * element.value;
    first.style.transform = "rotate(" + angle + "deg)";
    angle = -45;
}
function animateProgress(target) {
    element = document.getElementById('range');
    if (element.value < target) {
        var animation = setInterval(function() {
            element.stepUp();
            updateProgress(element);
            if (element.value >= target) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Radial Progress Bar"
Bootstrap 3.1.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Radial Progress Bar" Bootstrap 3.1.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Radial Progress Bar"
Bootstrap 3.1.0 Snippet by sumi9xm