<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>

#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; } #jumpList { width: 240px; margin: auto; text-align: center; } #jumpList button { margin: 0 10px; padding: 10px; }

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) { clearInterval(animation); } }, 1); } if (element.value > target) { var animation = setInterval(function() { element.stepDown(); updateProgress(element); if (element.value <= target) { clearInterval(animation); } }, 1); } }