How to Create Dynamic Circular Progress Bar with jQuery CSS3

generating preview

<html> <head> <style> body{ font-family:'Verdana', sans-serif; background:#ffffd9; } #progressController{background-color:#a0f2ef;} </style> </head> <body> <script type="text/javascript" src=""></script> <div id="page" class="page"> <div class="progress-bar"> <canvas id="inactiveProgress" class="progress-inactive" height="275px" width="275px"></canvas> <canvas id="activeProgress" class="progress-active" height="275px" width="275px"></canvas> <p>0%</p> </div> <div id="progressControllerContainer"> <input type="range" id="progressController" min="0" max="100" value="37" /> </div> </div> <style> @xxsUnit: 0.25rem; @xsUnit: 12px; @sUnit: 20px; @mUnit: 22px; @lUnit: 24px; @xlUnit: 38px; @xxlUnit: 75px; @track-color: #ffff00; @thumb-color: #e1e1e1; @thumb-radius: 5px; @thumb-height: @xlUnit; @thumb-width: @sUnit; @thumb-border-width: 1px; @thumb-border-color: #d6d6d6; @track-width: 100%; @track-height: @sUnit; @track-border-width: 1px; @track-border-color: #e6e6e6; @track-radius: 0px; @contrast: 5%; html,body{ height: 100%; width: 100%; } html, button, input, select, textarea { color: #5e5e5e; -webkit-font-smoothing: antialiased; } body { background-color: #f0f1f1; font: 1rem/1.2 Montserrat, Helvetica, Helvetica Neue, Arial; } .page{ display: flex; align-items: center; align-content: center; width: 275px; margin: 20px auto; } .progress-bar{ display: inline-block; width: 275px; height: 275px; margin: 7px; padding: 0; } .progress-bar .progress-active{ position: relative; top: -279px; } .progress-bar p{ position: relative; margin: 0; padding: 0; width: 275px; top: -460px; font-size: 54px; font-weight: 900; text-align: center; } #progressControllerContainer{ position: absolute; top: 320px; padding: 10px 80px; } .track() { width: @track-width; height: @track-height; cursor: pointer; animate: 0.2s; } .thumb() { border: @thumb-border-width solid @thumb-border-color; height: @thumb-height; width: @thumb-width; border-radius: @thumb-radius; background: @thumb-color; cursor: pointer; } input[type=range] { -webkit-appearance: none; margin: @thumb-height 0; width: @track-width; &:focus { outline: none; } &::-webkit-slider-runnable-track { .track(); background: @track-color; border-radius: @track-radius; border: @track-border-width solid @track-border-color; } &::-webkit-slider-thumb { .thumb(); -webkit-appearance: none; margin-top: ((-@track-border-width * 2 + @track-height) / 2) - (@thumb-height / 2); } &:focus::-webkit-slider-runnable-track { background: lighten(@track-color, @contrast); } &::-moz-range-track { .track(); background: @track-color; border-radius: @track-radius; border: @track-border-width solid @track-border-color; } &::-moz-range-thumb { .thumb(); } &::-ms-track { .track(); background: transparent; border-color: transparent; border-width: @thumb-width 0; color: transparent; } &::-ms-fill-lower { background: darken(@track-color, @contrast); border: @track-border-width solid @track-border-color; border-radius: @track-radius*2; } &::-ms-fill-upper { background: @track-color; border: @track-border-width solid @track-border-color; border-radius: @track-radius*2; } &::-ms-thumb { .thumb(); } &:focus::-ms-fill-lower { background: @track-color; } &:focus::-ms-fill-upper { background: lighten(@track-color, @contrast); } } </style> <script> $(document).ready(function(){ var $pc = $('#progressController'); var $pCaption = $('.progress-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(); //progress bar iProgressCTX.beginPath(); iProgressCTX.lineWidth = 0; iProgressCTX.fillStyle = '#e6e6e6'; iProgressCTX.arc(137.5,137.5,121,0,2*Math.PI); iProgressCTX.fill(); //progressbar 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 = '#ff6200'; barCTX.arc(137.5,137.5,111,startingAngle, endingAngle); barCTX.stroke(); $pCaption.text( (parseInt(percentage * 100, 10)) + '%'); } var percentage = $pc.val() / 100; drawProgress(aProgress, percentage, $pCaption); }); </script> </body> </html>

How to Use this Elements / Source Code:

You Can Use Dynamic Circular Progress Bar with jQuery CSS3 elements by select the above source code (CTRL + A) then copy the code (CTRL + C) and paste (CTRL + V) it in a blank html Page to initially test it. Then you can use the Above Dynamic Circular Progress Bar with jQuery CSS3 where ever you want for your project.

Usage of Dynamic Circular Progress Bar with jQuery CSS3:

Interested to create a progress circle chart infographic in Excel like never seen before? ... progress, it is common to represent the percentage complete with an advancing bar. ... The best part is, because it's dynamically calculated. bootstrap circle progress bar animation easy to create animation. Free Dynamic Circular Progress Bar with jQuery and CSS3, How to Create Dynamic Circular Progress Bar with jQuery CSS3? The number on top of the message box doesn't seem to be decreasing when I try to type in something.