@property --progress {
      syntax: '<percentage>';
      inherits: false;
      initial-value: 0%;
  }

  .radial-progress {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: conic-gradient(var(--bs-secondary) 0% var(--progress),
              #e0e0e0 var(--progress) 100%);
      aspect-ratio: 1 / 1;
      /* keeps circle true */
      display: flex;
      align-items: center;
      justify-content: center;
      transition: --progress 2s ease;
      margin: 0 auto 8px auto;
      /* top 0, bottom 8px */
  }

  .radial-progress::before {
      content: attr(data-progress);
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: bold;
  }