I’m working on a js code where circular progress bar shows based on ratings. But there’s an issue. Now total value is 10 set for progress bar. So I can enter max 10 in here. If I enter 9%, it not works as because max-value is 10. But I want something like that, if I enter any number with percent, like that 70% 85% 35%, the the value / max value will work as 100. How can I do it ?
Here’s my code:
$(document).ready(function() {
let val = $(".ratings").html();
const progressBar = $('[role="progressbar"]');
progressBar.attr('aria-valuenow', val); // Set the value to aria-valuenow attribute
progressBar.css('--value', val); // Set the value to --value CSS custom property
progressBar.text(val);
});div[role="progressbar"] {
--size: 3rem;
--fg: #369;
--bg: #def;
--pgValue: var(--value);
--pgPercentage: calc(var(--pgValue) * 10);
width: var(--size);
height: var(--size);
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
font-size: calc(var(--size) / 3.5);
color: var(--fg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ratings" style="display: none;">9.5</div>
<div role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="10" style="--value:"></div>