@keyframes growProgressBar {
    0%,
    33% {
      --pgPercentage: 0;
    }
    100% {
      --pgPercentage: var(--value);
    }
  }
  
  @property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
  }
  

.rating{
    --value: 0;
    --size: 3rem;
    --fg: #00925d;
    --bg: #1d5c45cb;
    --pgPercentage: var(--value);
    
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, rgb(185, 185, 187) 80%, transparent 0 99.9%, rgba(0, 0, 0, 0) 0), conic-gradient(var(--fg) calc(var(--pgPercentage) * 10%), var(--bg) 0);
    font-size: calc(var(--size) / 3);
    color: var(--fg);
    position: relative;
  }
  
  
  .rating::after {
    content: '';
    position: absolute;
    height: calc(var(--size) / 2 + 2.5px);
    width: calc(1 / 10 * var(--size) + 5px);
    top: -2.5px;
    left: 50%;
    transform: translateX(-50%) rotate(calc(var(--pgPercentage) / 10 * 360deg));
    transform-origin: 50% 100%;
    animation: growProgressBar 3s 1 forwards;
    z-index: 1;
    background-image: radial-gradient(var(--fg) 0 50%, transparent 50% 100%);
    background-repeat: no-repeat;
    background-position: 0px 0;
    background-size: 10px 10px;
  }