How to implement CSS semicircle progress bar

To implement a CSS semicircle progress bar, you can use the following steps:

1 Create a div element with specified radius and height and set it to be circular.

.progress {
  border-radius: 50%;
  width: 100px;
  height: 50px;
}

2 Set the element's border to semi-transparent to better show the progress bar.

.progress {
  border: 10px solid rgba(0,0,0,0.1);
}

3. Create a pseudo element as the progress bar and set it to a semicircle and rotate it 90 degrees so that it starts at the 12 o'clock position.

.progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid #1abc9c;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(90deg);
  transform-origin: 0 100%;
  box-sizing: border-box;
}

4 Use CSS animation or transition to achieve dynamic effects of the progress bar.

.progress::before {
  transition: border-color 0.5s ease-in-out;
}
.progress[data-progress="25"]::before {
  border-color: #1abc9c transparent transparent transparent;
}

In this way, you can implement a simple CSS semicircle progress bar and control the progress of the progress bar by setting different "data-progress" attribute values.

Reprinted from: Weidian Reading    https://www.weidianyuedu.com