Transparent dynamic circular progress bar in JavaScript/CSS like hollow from inside or background image visible?

I achieved the circular progress bar with background color like this:

But when i try to use this same code but without background color it becomes PI or rectangular. I want to achieve like this:

But what i have is:

If i try to remove bg color it becomes

I searched a lot but couldn’t found any solution.

Here is the code that i am using for this.

<!-- Progress bar -->
<div class="bar-container">
   <div class="circular-progress" style="background: conic-gradient(#FFCAF0 <?php echo $percentage * 3.6; ?>deg, #003866 5deg);">
      <div class="value-container"><?php echo $percentage; ?>%</div>
     </div>
</div>

Here is CSS code:

.bar-container {
        background-color: #003866;
        display: grid;
        place-items: center;
    }
    .circular-progress {
        position: relative;
        height: 200px;
        width: 200px;
        border-radius: 50%;
        display: grid;
        place-items: center;
    }
    .circular-progress::before {
        content: "";
        display: block !important;
        position: absolute;
        height: 84%;
        width: 84%;
        background-color: #003866;
        border-radius: 50%;
    }
    .value-container {
        position: relative;
        font-size: 20px;
        color: #FFCAF0;
    }