CSS timer with radial progress bar

Developer
Juan Cabrera
Size
3,210 Kb
Views
70,840
  1. CSS timer with radial progress bar Previews
  2. CSS timer with radial progress bar HTML Codes
  3. CSS timer with radial progress bar CSS Codes
  4. CSS timer with radial progress bar JS Codes

How do I make an css timer with radial progress bar?

What is a css timer with radial progress bar? How do you make a css timer with radial progress bar? This script and codes were developed by Juan Cabrera on 12 August 2022, Friday.

CSS timer with radial progress bar Previews
IQ Test

CSS timer with radial progress bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS timer with radial progress bar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- View on Github -->
<!-- http://juancabrera.github.io/radial-timer/ -->
<div class='radialtimer' id='timer'></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS timer with radial progress bar - Script Codes CSS Codes

body { background-color: #2f3439;
}
.radialtimer { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px;
}
.radialtimer .n { position: absolute; width: 200px; height: 200px; background: white; border-radius: 50%; text-align: center; line-height: 200px; font-family: "Georgia"; font-size: 70px; color: #888;
}
.radialtimer .slice { position: absolute; width: 200px; height: 200px; clip: rect(0px, 200px, 200px, 100px);
}
.radialtimer .slice.nc { clip: rect(auto, auto, auto, auto);
}
.radialtimer .slice .q { position: absolute; width: 170px; height: 170px; border: 16px white solid; border-radius: 50%; clip: rect(0px, 100px, 100px, 0px); z-index: 2;
}
.radialtimer .slice .pie { border: 15px #6BC967 solid; position: absolute; width: 170px; height: 170px; clip: rect(0px, 100px, 200px, 0px); border-radius: 50%; transition: all 1s linear; z-index: 1;
}

CSS timer with radial progress bar - Script Codes JS Codes

function radialTimer() {	var self = this;	this.seconds = 0;	this.count = 0;	this.degrees = 0;	this.interval = null;	this.timerHTML = "<div class='n'></div><div class='slice'><div class='q'></div><div class='pie r'></div><div class='pie l'></div></div>";	this.timerContainer = null;	this.number = null;	this.slice = null;	this.pie = null;	this.pieRight = null;	this.pieLeft = null;	this.quarter = null;	this.init = function(e, s) {	self.timerContainer = $("#" + e);	self.timerContainer.html(self.timerHTML);	self.number = self.timerContainer.find(".n");	self.slice = self.timerContainer.find(".slice");	self.pie = self.timerContainer.find(".pie");	self.pieRight = self.timerContainer.find(".pie.r");	self.pieLeft = self.timerContainer.find(".pie.l");	self.quarter = self.timerContainer.find(".q");	// start timer	self.start(s);	}	this.start = function(s) {	self.seconds = s;	self.interval = window.setInterval(function () {	self.number.html(self.seconds - self.count);	self.count++;	if (self.count > (self.seconds - 1)) clearInterval(self.interval);	self.degrees = self.degrees + (360 / self.seconds);	if (self.count >= (self.seconds / 2)) {	self.slice.addClass("nc");	if (!self.slice.hasClass("mth")) self.pieRight.css({"transform":"rotate(180deg)"});	self.pieLeft.css({"transform":"rotate(" + self.degrees + "deg)"});	self.slice.addClass("mth");	if (self.count >= (self.seconds * 0.75)) self.quarter.remove();	} else {	self.pie.css({"transform":"rotate(" + self.degrees + "deg)"});	}	}, 1000);	}
}
var Timer;
$(document).ready(function() {	Timer = new radialTimer();	Timer.init("timer", 20);
});
CSS timer with radial progress bar - Script Codes
CSS timer with radial progress bar - Script Codes
Home Page Home
Developer Juan Cabrera
Username cabrera
Uploaded August 12, 2022
Rating 4
Size 3,210 Kb
Views 70,840
Do you need developer help for CSS timer with radial 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!

Juan Cabrera (cabrera) Script Codes
Name
Dev-social buttons with fancy hover
Gallery prototype
A Pen by Juan Cabrera
Simple styled checkbox
Simple CSS loader.
Create amazing SEO content 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!