div[role="progress-bar2"] {
  /* --value: 200; */
  --duration: 3s;
  --delay: 1s;
  --size: 220px;
  --thickness: 18px;
  --background-color: #efefef;
  --gradient-color-1-1: #bb0000;
  --gradient-color-1-2: #ff0000;
  --gradient-color-2-1: #bb0000;
  --gradient-color-2-2: #ff0000;

  position: relative;
  width: var(--size);
  height: var(--size);
  box-sizing: border-box;
  background: var(--background-color);
  --gradient: conic-gradient(#000 100%, #0000 0), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--gradient);
  mask: var(--gradient);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  padding: var(--thickness);
  border-radius: 50%;
}
@property --percentage {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}
div[role="progress-bar2"]:before,
div[role="progress-bar2"]:after {
  --percentage: min(100%, var(--value) * 1%);
  content: "";
  position: absolute;
  left: 0%;
  top: 0%;
  width: calc(100% - (var(--thickness) * 2));
  height: calc(100% - (var(--thickness) * 2));
  opacity: 0;
  animation: show-progress-bar2 0.1s forwards var(--delay), animate-progress-bar2 calc(var(--duration) * (var(--value) / 200)) forwards var(--delay) linear;
  background: conic-gradient(var(--gradient-color-1-1), var(--gradient-color-1-2));
  --gradient: conic-gradient(#000 var(--percentage), #0000 0), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--gradient);
  mask: var(--gradient);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  padding: var(--thickness);
  border-radius: 50%;
}
div[role="progress-bar2"]:after {
  background: conic-gradient(var(--gradient-color-2-1), var(--gradient-color-2-2));
  --percentage: calc((var(--value) - 100) * 1%);
  --ptime: calc(var(--duration) * (var(--value) / 200));
  animation: show-progress-bar2 0.1s forwards calc((var(--delay) + var(--ptime))),  animate-progress-bar2 calc(var(--duration) * ((var(--value) - 100) / 200)) forwards calc((var(--delay) + var(--ptime))) linear;
}
@keyframes animate-progress-bar2 { from { --percentage: 0%; } }
@keyframes show-progress-bar2 { to { opacity: 1; }