Circular Progress Bar CSS

#html #css #javascript #webdev

Hello everyone, in this tutorial, I'll show you how to use HTML, CSS, and JavaScript to make a circular progress bar.
I picked up this strategy from -
https://youtu.be/SKU2gExpkPI

Let's get Started...

Codepen Demo -

HTML -

<div class="circular-progress" data-inner-circle-color="lightgrey" data-percentage="80" data-progress-color="crimson" data-bg-color="black">
  <div class="inner-circle"></div>
  <p class="percentage">0%</p>
</div>

The main div has the class "circular-progress," which we will use to access the progress bar in both javascript and CSS. A second div with the class "inner-circle" is contained within the main div and will be used to create the inner circle within it. It will be smaller than the main div and centered so that only a strip of the outer div will be visible, which we will utilise to create the progress bar effect.
The % level will be displayed in the paragraph with the class.
"percentage."
There are 4 data-* attributes: data-inner-circle-color, data-percentage, data-progress-color, and data-bg-color. "data-inner-circle-color" will be used to set the background color of the inner circle, "data-percentage" will be used to set the percentage value (up to what percentage the progress bar will go), and "data-progress-color" will be used to set the color of the progress bar strip, and "data-bg-color" will be used to set the background color of the main progress div.

CSS -

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --progress-bar-width: 200px;
  --progress-bar-height: 200px;
  --font-size: 2rem;
}

.circular-progress {
  width: var(--progress-bar-width);
  height: var(--progress-bar-height);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner-circle {
  position: absolute;
  width: calc(var(--progress-bar-width) - 30px);
  height: calc(var(--progress-bar-height) - 30px);
  border-radius: 50%;
  background-color: lightgrey;
}

.percentage {
  position: relative;
  font-size: var(--font-size);
  color: rgb(0, 0, 0, 0.8);
}

Some CSS styling to make the progress bar looks like a circular one.
Width and Height of the inner circle will always be 30px less than the outer circle using CSS variables and calc() function.

JavaScript -

const circularProgress = document.querySelectorAll(".circular-progress");

Array.from(circularProgress).forEach((progressBar) => {
  const progressValue = progressBar.querySelector(".percentage");
  const innerCircle = progressBar.querySelector(".inner-circle");
  let startValue = 0,
    endValue = Number(progressBar.getAttribute("data-percentage")),
    speed = 50,
    progressColor = progressBar.getAttribute("data-progress-color");

  const progress = setInterval(() => {
    startValue++;
    progressValue.textContent = `${startValue}%`;
    progressValue.style.color = `${progressColor}`;

    innerCircle.style.backgroundColor = `${progressBar.getAttribute(
      "data-inner-circle-color"
    )}`;

    progressBar.style.background = `conic-gradient(${progressColor} ${
      startValue * 3.6
    }deg,${progressBar.getAttribute("data-bg-color")} 0deg)`;
    if (startValue === endValue) {
      clearInterval(progress);
    }
  }, speed);
});

Using "querySelectorAll," select all of the document's progress bars, and then, using "forEach," provide the progress bar logic for each element with the class name "circular-progress."
ProgressColor is the color used to determine the color of the strip of the progress bar. StartValue and EndValue are the starting and ending percentages, respectively. Speed will be used to set the delay in setInterval.
Making an interval "progress" and using the "speed" variable to control its delay.
Increasing the Value of startValue by 1 on every interval.
Setting the percentage value for the paragraph using textContent and color using inline style method.
Then setting the inner circle background color with "data-inner-circle-color" attibute value using inline style method.
Conic-gradient is used to create the progress bar effect. There are two colours in this gradient: the first is the colour of the strip, whose degree will increase by 3.6 times the startValue (for example, 0 * 3.6, 1*3.6, 2*3.6,... 100 * 3.6), and the second is the value used for the other part of the circle, or to put it another way, the remaining part of the circular strip; its value is 0deg and it will always cover the remaining part of the strip.
At the end, inside an if statement, if the value of start and end is equal, then clear the interval and stop the progress bar.

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me with some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90