/*进度圈*/

.adm-progress-circle {
  --track-width: var(--adm-progress-circle-track-width, 6px);
  --size: var(--adm-progress-circle-size, 100px);
  --track-color: var(--adm-progress-circle-track-color, #e5e5e5);
  --fill-color: var(--adm-progress-circle-fill-color, var(--adm-color-primary));
  --percent: 0;
  --pi: 3.14159265;
  --radius: calc(var(--size) / 2 - var(--track-width) / 2);
  --circumference: calc(var(--radius) * var(--pi) * 2);
  display: inline-block;
  width: var(--size);
  height: var(--size);
}

.adm-progress-circle-svg {
  width: 100%;
  height: 100%;
}

.adm-progress-circle-svg > .adm-progress-circle-track,
.adm-progress-circle-svg .adm-progress-circle-fill {
  stroke-width: var(--track-width);
  r: var(--radius);
  cx: calc(var(--size) / 2);
  cy: calc(var(--size) / 2);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.adm-progress-circle-svg > .adm-progress-circle-track {
  stroke: var(--track-color);
}

.adm-progress-circle-svg > .adm-progress-circle-fill {
  transition: stroke-dashoffset 0.35s;
  stroke: var(--fill-color);
  stroke-dasharray: var(--circumference);
  stroke-dashoffset: calc(var(--circumference) * (1 - var(--percent) / 100));
  stroke-linecap: round;
}

.adm-progress-circle-content {
  position: relative;
  margin: auto;
  width: 100%;
  height: 100%;
}

.adm-progress-circle-info {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}