QP School

Full Version: CSS Conic Gradients for Circular Progress Bar
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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).