Hello readers, how are you, you must have seen many loading times, there are many types. Which enhances the beauty of your website. Like when a visitor comes to your site, he gets to see something great, it is the effort of all of us website owners. As you see us, we also bring some numbered codes for you. Like what we have brought for you today. Stylish Circular Progress bar which is made up of HTML CSS and javascript. It's totally free. We have taken this code from hi.coders. Which we got from an Instagram post. We have published the code here without asking them. we respond to them.
We also call the loader a preloader, which shows some elements like you are giving a download link, either a file is uploaded or some other process is going on there, but we show this loading process bar. gets it done
This process bar will only be a process, you will have to run the next function according to you. It is very easy, if you have a little bit of JavaScript knowledge then you can do it easily.
This loader rotates 360 degrees clockwise. During this time, its color changes to orange and yellow while roaming. This means that when it is rotated 90 degrees its color changes from yellow to orange and when it rotates 180 degrees its color changes to orange and when it rotates 360 degrees its color changes completely to orange goes. done now.
You might like this:
Stylish Circular Progress bar using HTML CSS & javascript Source Code
To run this code, you will have to create some files, which is to create the first file index.html. If you want to do any pre-made file, then you can do that too, but keep one thing in mind the class of this loading process bar and any other class which is already on your website, then you should change it or else. it won't work
First of all, you have to create an index.html file or add in anyone then add the below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="loader">
<canvas id="canvas"></canvas>
<h2 class="percent"></h2>
</div>
<p>of <strong>720</strong> customers</p>
</div>
<script src="main.js"></script>
</body>
</html>After this file is created, you will have to add a css file for styling, which will give you the code below. Which you need to name with style.css
body {
margin: 0;
font-family: "poppins", Arial, Helvetica, sans-serif;
background-color: #141526;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100vh;
}
.loader {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
canvas {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
.percent {
position: absolute;
font-size: 2rem;
color: #fff;
}
p {
color: #acadc9;
}And after all the styles and structures are ready, you will need JavaScript to make it work properly, so you will have to create a main.js file, after it is created, add this code to it
const canvas = document.querySelector("#canvas");
const percent = document.querySelector(".percent");
const fullCircle = Math.PI * 2;
let completed = 0;
let val = 100;
// function promptInput() {
// val = prompt("Enter percent value.");
// val = parseInt(val);
// if (val > 100 || val < 1) {
// alert("Invalid input. Only 1 - 100 value is allowed");
// promptInput();
// }
// }
// promptInput();
let interval = setInterval(() => {
completed++;
if (completed <= val) {
createCircle((completed / 100) * fullCircle);
} else {
clearInterval(interval);
console.log("interval cleared");
}
}, 30);
function createCircle(radian) {
canvas.height = 230;
canvas.width = 230;
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(115, 115, 90, 0, Math.PI * 2, false);
ctx.strokeStyle = "#090912";
ctx.lineWidth = 30;
ctx.stroke();
ctx.beginPath();
var gradient = ctx.createLinearGradient(0, 0, 230, 230);
gradient.addColorStop(0, "#ff0000");
gradient.addColorStop(0.5, "#ff7300");
gradient.addColorStop(1, "#fff300");
ctx.arc(115, 115, 90, 0, radian, false);
ctx.strokeStyle = gradient;
ctx.lineWidth = 30;
ctx.stroke();
percent.innerHTML = completed + "%";
}After applying all these codes, your process bar will work properly, if you are facing any problem then you can download this entire code which you will get to see the download button below.