"Circular Progress Bar by Cliff Pyles"
Bootstrap 3.0.0 Snippet by wsamotshozo

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- JJ --> <div class="col-sm-12"> <span >Score: </span> 773 out of 100 <div id="page" class="page"> <div class="score-bar"> <canvas id="inactiveProgress" class="score-inactive" height="275px" width="275px"></canvas> <canvas id="activeProgress" class="score-active" height="275px" width="275px"></canvas> <!--<p>0%</p>--> </div> <div id="scoreControllerContainer"> <input type="range" id="scoreController" min="0" max="1000" value="773" /> </div> </div> </div> <!-- SDG -->
.page{ display: flex; align-items: center; align-content: center; width: 275px; margin: 20px auto; } .score-bar{ display: inline-block; width: 275px; height: 275px; margin: 7px; padding: 0; } .score-bar .score-active{ position: relative; top: -279px; } .score-bar p{ position: relative; margin: 0; padding: 0; width: 275px; top: -460px; font-size: 54px; font-weight: 900; text-align: center; color:#000; } #scoreControllerContainer{ position: absolute; top: 320px; padding: 10px 80px; }
$(document).ready(function(){ var $pc = $('#scoreController'); var $pCaption = $('.score-bar p'); var iProgress = document.getElementById('inactiveProgress'); var aProgress = document.getElementById('activeProgress'); var iProgressCTX = iProgress.getContext('2d'); drawInactive(iProgressCTX); $pc.on('change', function(){ var percentage = $(this).val() / 100; drawProgress(aProgress, percentage, $pCaption); }); function drawInactive(iProgressCTX){ iProgressCTX.lineCap = 'square'; //outer ring //iProgressCTX.beginPath(); //iProgressCTX.lineWidth = 15; //iProgressCTX.strokeStyle = '#e1e1e1'; //iProgressCTX.arc(137.5,137.5,129,0,2*Math.PI); //iProgressCTX.stroke(); //score bar iProgressCTX.beginPath(); iProgressCTX.lineWidth = 0; iProgressCTX.fillStyle = '#e6e6e6'; iProgressCTX.arc(137.5,137.5,121,0,2*Math.PI); iProgressCTX.fill(); //scorebar caption iProgressCTX.beginPath(); iProgressCTX.lineWidth = 0; iProgressCTX.fillStyle = '#fff'; iProgressCTX.arc(137.5,137.5,100,0,2*Math.PI); iProgressCTX.fill(); } function drawProgress(bar, percentage, $pCaption){ var barCTX = bar.getContext("2d"); var quarterTurn = Math.PI / 2; var endingAngle = ((2*percentage) * Math.PI) - quarterTurn; var startingAngle = 0 - quarterTurn; bar.width = bar.width; barCTX.lineCap = 'square'; barCTX.beginPath(); barCTX.lineWidth = 20; barCTX.strokeStyle = '#00B4FF'; barCTX.arc(137.5,137.5,111,startingAngle, endingAngle); barCTX.stroke(); barCTX.beginPath(); barCTX.lineWidth = 20; barCTX.strokeStyle = '#f0ad4e'; barCTX.arc(137.5,137.5,111,endingAngle, startingAngle); barCTX.stroke(); //$pCaption.text( (parseInt(percentage * 1000, 10))); //$pCaption.text( 'F. S.'); } var percentage = $pc.val()/1000; drawProgress(aProgress, percentage, $pCaption); });

Related: See More


Questions / Comments: