Stylish Circular Progress bar using html css & javascript

PR Gujju

 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">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <div class="container">
      <div class="loader">
        <canvas id="canvas"></canvas>
        <h2 class="percent"></h2>
      <p>of <strong>720</strong> customers</p>
    <script src="main.js"></script>

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(() => {
  if (completed <= val) {
    createCircle((completed / 100) * fullCircle);
  } else {
    console.log("interval cleared");
}, 30);

function createCircle(radian) {
  canvas.height = 230;
  canvas.width = 230;

  const ctx = canvas.getContext("2d");

  ctx.arc(115, 115, 90, 0, Math.PI * 2, false);
  ctx.strokeStyle = "#090912";
  ctx.lineWidth = 30;

  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;
  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.

Getting Info...

About the Author

PR Gujju
Blogger | Youtuber | Beginner Coder

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.