<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);
});
