+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: CSS Conic Gradients for Circular Progress Bar (/showthread.php?tid=5193)
CSS Conic Gradients for Circular Progress Bar - Qomplainerz - 07-26-2023
Description:
CSS conic gradients can be used to create visually appealing circular progress bars.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Conic Gradients for Circular Progress Bar Example</title>
<style>
.progress-bar {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
green 0%,
green 50%,
lightgrey 50%,
lightgrey 100%
);
/* Rotate the gradient to start from the top */
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="progress-bar"></div>
</body>
</html>
Explanation:
In this example, the .progress-bar div has a width and height of 100px, making it a perfect circle due to border-radius: 50%. The circular progress bar is achieved using a conic gradient, defined by conic-gradient(). The gradient starts from 0 degrees (the top) and progresses from green (0%) to light grey (100%). To make it look like a progress bar, we rotate the gradient by -90 degrees using transform: rotate(-90deg).