Circular Progress Bar

Developer
Rodrigo Hernando
Size
4,985 Kb
Views
20,240
  1. Circular Progress Bar Previews
  2. Circular Progress Bar HTML Codes
  3. Circular Progress Bar CSS Codes
  4. Circular Progress Bar JS Codes

How do I make an circular progress bar?

A circular progress bar created with canvas and animated with Greensock Animation Platform JS. What is a circular progress bar? How do you make a circular progress bar? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.

Circular Progress Bar Previews
IQ Test

Circular Progress Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circular Progress Bar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button id="btn1">Add images</button> <button id="btn2">Reset Container</button>
<div id="imgContainer"></div>
<div id="progressBar"></div>
<canvas id="canvas" width="220" height="220"></canvas>
<div id="percentageContainer">	<div id="percentageLoad">0 %</div>
</div>
<div id="spinnerContainer">	<div class="spinDot"></div> <div class="spinDot"></div> <div class="spinDot"></div> <div class="spinDot"></div> <div class="spinDot"></div> <div class="spinDot"></div> <div class="spinDot"></div> <div class="spinDot"></div> <div class="spinDot"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Circular Progress Bar - Script Codes CSS Codes

html
{ height:100%;
}
body
{	margin:0; padding:0; background : -webkit-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%); background : -moz-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%); background : -o-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%); background : -ms-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%); background : -linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%); background-repeat: no-repeat; background-attachment: fixed;
}
/* IMAGES STYLE */
#imgContainer
{	text-align:center;	width:80%;	margin-left:10%;	top:50px;	border:solid 1px #fff;	padding:10px;	position:relative;	overflow:hidden;
}
#imgContainer:after
{	content:"";	clear:both;	display:table;
}
#imgContainer img
{	position:relative;	top:-150px;	margin-left:10px;	border:solid 2px #FF9;
}
#imgContainer img:first-child
{	margin-left:0;
}
/*---------------------------------------------------------------------
/* CANVAS */
#canvas
{	position:relative;	margin-top:100px;	left:50%;	margin-left:-110px;
}
/*---------------------------------------------------------------------
/* PERCENTAGE STYLE */
#percentageContainer
{	position:relative;	top:-150px;	text-align:center;
}
#percentageLoad
{	padding:5px 15px;	border:solid 1px;	border-radius:5px;	background:#000;	font:44px bold "Trebuchet MS", Arial, Helvetica, sans-serif;	color:#fff;	display:inline-block;
}
/*---------------------------------------------------------------------
/* SPINNER STYLE */
#spinnerContainer
{	top:-135px;	left:50%;	margin-left:-107.5px;	position:relative;	width:215px;	height:50px;	text-align:center;
}
.spinDot
{	width:15px;	height:15px;	position:absolute;	background:#000;	border-radius:50%;	top:100px;	left:100px;
}
/*---------------------------------------------------------------------
/* BUTTONS STYLE */
button
{ padding:5px 10px; margin:10px; border-radius:5px; background : -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);	background : -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);	background : -o-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);	background : -ms-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);	background : -linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%); border:1px solid #646464;
}
button:hover
{ background : -webkit-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);	background : -moz-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);	background : -o-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);	background : -ms-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);	background : -linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);
}
button:active
{ position:relative;	top:1px;
}
/*---------------------------------------------------------------------
/* PROGRESS BAR STYLE */
#progressBar
{	width:100%;	height:5px;	background:#fff;	position:relative; margin-top:60px; margin-bottom:-90px;
}

Circular Progress Bar - Script Codes JS Codes

var imgContainer = $("#imgContainer"),	progressBar = $("#progressBar"),	btn1 = $("#btn1"),	btn2 = $("#btn2"),	//images variables	imagesAmount = 6,//total images being loaded	loadedCount = 0,//current number of images loaded	currentImages,//images already present in the container	//we get the full width of the progress bar it depens on display width	progBarWidth = progressBar.outerWidth(),	//how much progress every image means	progressUnit = 1 / imagesAmount,	currentProgress,//the current progress of the total images being downloaded	percentageLoaded;//total percent of images already loaded
/*
---------------------------------------------------------------------	ADD IMAGES CODE
---------------------------------------------------------------------
*/
function addImages() {	//show the percentage loaded text	TweenMax.to([percentageContainer,percentageLoad], .5, {scale:1, opacity:1});	for(var i = 0; i < imagesAmount; i++)	{	//this vars are for getting random images	//for real case scenario this is not needed. different approach for that type	var size = Math.random() * 3 + 1,	width = Math.round( (Math.random() * 110 + 100) * size ),	height = Math.round( 140 * size );	imgString = '<img src="https://lorempixel.com/'+ width + '/' + height + '/" height="100" />';	//add the image at the beggining of the container	imgContainer.prepend(imgString);	}	imgContainer.imagesLoaded()//we set up the images loaded instance to work in the image container	.progress(loadProgress);//we add the deferred call to the images loaded function
}
//------ADD IMAGES CODE END----------------------------------------//
/*
---------------------------------------------------------------------	CANVAS CIRCLE CODE
---------------------------------------------------------------------
*/
var canvas = document.getElementById('canvas'),	ctx = canvas.getContext('2d'),//circle context	segmentObj = {seg:0},	totalSegments = 150;//number of circle segments, more segments smoother animation
//canvas initial set up
ctx.strokeStyle = 'rgb(0,0,200)';
ctx.lineWidth = 5;
ctx.lineCap = 'round';
//canvas works with radians, but we're feeding degrees so they need to be converted before they're used
function getRadians(degreesValue) {	var radiansValue = (Math.PI / 180) * degreesValue;	return radiansValue;
}
//function to draw the arc/circle
//the params are start angle, end angle and boolean for clokwise or counter clockwise
function manualCircle(start, end, clock) {	ctx.clearRect(0,0,220,220);//we have to clear the canvas otherwise the line looks horrible	ctx.beginPath();	ctx.arc(110, 110, 100, start, end, clock);	ctx.stroke();
}
//update arc/circle drawing
function circleUpdate() {	//degrees of the arc, could be less, in this case we create a full circle	var amplitude = 360,	step = amplitude / totalSegments,	endAngle = (step * (segmentObj.seg + 1));//the new angle for the next step in the arc	//draw the new arc	manualCircle(-getRadians(0), -getRadians(endAngle), true);
}
//------CANVAS CIRCLE CODE END-------------------------------------//
/*
---------------------------------------------------------------------	PROGRESS CODE
---------------------------------------------------------------------
*/
//this function executes everytime an image is complete
function loadProgress(imgLoad, image) {	//one more image has been loaded. this counts even for the images already loaded	loadedCount++;	//we put the image in correct position	TweenMax.to(image.img, .5, {top:0});	//since there could be other images in the container we check that	//with this the progress bar and percentage loaded are updated by the	//number of images being loaded and not the total in the container	if( (loadedCount - currentImages.length) > 0 ) {	currentProgress = progressUnit * (loadedCount - currentImages.length);	TweenLite.to(progressTl, .7, {progress:currentProgress, ease:Linear.easeNone});	}
}
//progress animation instance. the instance's time is irrelevant, can be anything but 0 to void immediate render
var progressTl = new TimelineMax({paused:true,onUpdate:progressUpdate,onComplete:loadComplete})
progressTl	//tween the progress bar width	.to(progressBar, 1, {width:progBarWidth,ease:Linear.easeNone})	//tween the amount of circle segments to set the cricle new angle	.to(segmentObj, 1, {seg:totalSegments,ease:Linear.easeNone,roundProps:'seg',},0);
//as the progress bar witdh updates and grows we put the precentage loaded in the screen
function progressUpdate() {	//the percentage loaded based on the tween's progress	percentageLoaded = Math.round(progressTl.progress() * 100);	//we put the percentage in the screen	$("#percentageLoad").html(percentageLoaded + ' %');	circleUpdate();
}
//this function resets progress bar width, set progress and percentage loaded to 0
function resetProgress() {	//set the progress bar to width 0, no progress	TweenLite.set(progressBar, {width:0});	progressTl.progress(0);	percentageLoaded = 0;	loadedCount = 0;
}
//------PROGRESS CODE END------------------------------------------//
/*
---------------------------------------------------------------------	BUTTONS EVENTS
---------------------------------------------------------------------
*/
btn1.click(function() {	resetProgress();//reset the progress	currentImages = imgContainer.find("img");//how many images there are	addImages();//run the function to add the images	setupSipnner();//play the spinner line
});
btn2.click(function() {	resetProgress();//reset the progress	imgContainer.empty();//remove the images from the container
});
//------BUTTONS EVENTS END-----------------------------------------//
/*
---------------------------------------------------------------------	SPINNER CODE
---------------------------------------------------------------------
*/
//spinner variables
var spinContainer = $("#spinnerContainer"),	spinElements = $(".spinDot"),	spinAngleSet = 360 / spinElements.length,	spinSpeed = 0.055,//smaller the number faster the spin	spinLine = new TimelineMax({paused:true, repeat:-1, delay:.55});
TweenMax.set(spinContainer, {perspective:300});
function setupSipnner() {	TweenMax.set(spinElements, {opacity:1});	$.each(spinElements, function(index, element)	{	var alpha = (0.1 * index) + .3;	TweenMax.to(element, .5,{rotationY:(( index + 1 ) * spinAngleSet), transformOrigin:'50% 50% -100px', autoAlpha:alpha});	spinLine.set(spinElements, {rotationY:('+=' + spinAngleSet), transformOrigin:'50% 50% -100px', ease:Linear.easeNone, delay:spinSpeed})	});	spinLine.play();//play the spinner line
}
//------SPINNER CODE END-------------------------------------------//
/*
---------------------------------------------------------------------	LOAD COMPLETE CODE
---------------------------------------------------------------------
*/
//load completes
function loadComplete() {	spinLine.pause();	TweenMax.to(spinElements, .5, {rotationY:0});	TweenMax.to(spinElements, .25, {opacity:0, delay:.5});	spinLine.seek(0);	TweenMax.to([percentageContainer,percentageLoad], .5, {scale:0, opacity:0, delay:.5});
}
//------LOAD COMPLETE CODE END-------------------------------------//
Circular Progress Bar - Script Codes
Circular Progress Bar - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 18, 2022
Rating 3.5
Size 4,985 Kb
Views 20,240
Do you need developer help for Circular Progress Bar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rodrigo Hernando (rhernando) Script Codes
Name
GSAP Scramble Text Plugin
Z Index Tween
Bezier Animation with straight paths
Cross-Browser Flip Card
Greensock Draggable latest update
Greensock Bezier Morph
Greensock Swipe Slides
Transform Orign
Simple Dragging Direction
Simple Drop Down Menu
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!