CSS: Fill a div background's color based on a percentage value

In my Next.js web app I'm trying to achieve the following:

enter image description here

Notice how the red background of a div is only 98% complete.

When trying to recreate it, I've only been able to achieve this:

enter image description here

And was wondering how to be able to do the same as the first image.

My Next.js (React) code snippet goes as follows:

<div className={classes.bgRankWrapper}>
   <div className={classes.bgRedRank}>
      <div className={classes.bgBlackRank}>
         <span className={classes.bestPlayerRank}>{bestPlayerRank}</span>
      </div>
   </div>
</div>

And its css:

.bgRankWrapper {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 50%;
    top: 63%;
    left: 33%;
    padding: 6px;
}

.bgRedRank {
    border: 8px solid #e12d4c;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 4px;
}

.bgBlackRank {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #1e1134;
    display: flex;
    justify-content: center;
    align-items: center;
}

Basically I want my .bgRedRank to be 98% complete and the most obvious thing to do is to set its css width property to be the same as the players rank which in this case would be 98% but that actually doesn't work and produces the following result:

enter image description here

notice how reducing the width only moved the bgRedDiv sideways.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum