Circular progress bar based on percentage

Question

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 ?

When I enter any number below 10 and without percentage, it looks like that:

When enter with percentage:

I want that, if the number is with any percentage, the circle or progress bar will consider as 100 max value. And if Don't have any percent after Number, it will work as 10 max value.

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>

@Alivetodie-Anant if someone enter any value more than `10`, it will show `10`. I mean more than `10` or `10` is same. It will show you the number `10.5`, but progress bar will be full. Like That : https://prnt.sc/nCtp323nOmpJ — Md. Ibrahim, Jul 07 '23 at 10:00
@Alivetodie-Anant But I wanted both system, Like if I want any number without % sign, it will work as now (Max Value is 10) like 5/7.5/10/3.7. But if I enter any number with % sign, it will work as max value 100. Both features. If the number convey %, it will work like 100, and if any solid number, it will work like 10 max value — Md. Ibrahim, Jul 07 '23 at 10:01
that means 35 will be assumed as 10 but same 35 % needs to be shown in ration of 100%? — Alive to die - Anant, Jul 07 '23 at 10:08
@Alivetodie-Anant Exactly. 100% Right. Finally Somabody can catch my words. — Md. Ibrahim, Jul 07 '23 at 10:09

score 1 · Answer 1 · answered Jul 07 '23 at 09:14

So instead of 9.5, you want that div element to contain 95%?

Then you first need to convert your percentage to the 0 to 10 "range" - which in this case is of course terribly easy, you divide the 95 by 10 - after you used parseInt first, to get only the 95 as a numeric value out of the 95%.

And then the second thing that is important here, is the type of your CSS variable. It needs to be a string value - and as long as you just read the value from the input field, it was one. But now that we did a bit of math, it is a float value, that needs to be made into a string value again - which we can f.e. do using the old "" + ... trick.

(I introduced a second variable displayVal that will keep the original 95% text from the div, because that's what you want to show inside the circle.)

$(document).ready(function() {
      let displayVal = $(".ratings").html(),
          val = "" + (parseInt(displayVal) / 10);
      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(displayVal);
    });

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;">95%</div>
    <div role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="10" style="--value:"></div>

Thanks @CBroe. I really appreciate your response. But What I wanted is that, According to my question, Now total progress value is 10. I mean Its max value is 10. Any number like 5, 9, 3 or 10 is accepted, but not more 10. But when I enter with any percentagen it not works. I wanted both system, Like if I want any number without `%` sign, it will work as now (Max Value is 10) like 5/7.5/10/3.7. But if I enter any number with `%` sign, it will work as max value `100`. Both features. If the number convey `%`, it will work like `100`, and if any solid number, it will work like `10` max value. — Md. Ibrahim, Jul 07 '23 at 09:57
So add a check whether the text you read from the div element contains a `%` first, and then handle each case accordingly. — CBroe, Jul 07 '23 at 10:14
How can I do a check ? `It means 35 will be assumed as 10 but same 35 % needs to be shown in ration of 100%?` — Md. Ibrahim, Jul 07 '23 at 10:16
Please do a bit of your own research, before immediately asking "how can I do that"; especially when it comes to things this trivial, and already broadly discussed. "javascript check if text contains specific character" typed into Google can lead you to results such as https://stackoverflow.com/q/4444477/1427878 in no time- — CBroe, Jul 07 '23 at 10:19

score 1 · Accepted Answer · answered Jul 07 '23 at 10:25

I have just modify the code and use 2 progress bar - 1 for percentage value and other without percentage. Code for progressbar could be same as I want to show how to handle both value

$(document).ready(function() {
      let val_str = val = $(".ratings1").html();
      if(val.includes('%')) {
          val = val.replace(/%\s*$/, "");
          val = "" + (parseInt(val) / 10);
      }
          
      const progressBar = $('[class="progressbar1"]');
      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_str);
      
      
      let val_str2 = val2 = $(".ratings2").html();
      if(val2.includes('%')) {
          val2 = val2.replace(/%\s*$/, "");
          val2 = "" + (parseInt(val2) / 10);
      }
          
      const progressBar2 = $('[class="progressbar2"]');
      progressBar2.attr('aria-valuenow', val2); // Set the value to aria-valuenow attribute
      progressBar2.css('--value', val2); // Set the value to --value CSS custom property
      progressBar2.text(val_str2);
    });

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="ratings1" style="display: none;">9.5</div>
    <div class="progressbar1" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="10" style="--value:"></div>
    
<br/><br/>
<div class="ratings2" style="display: none;">95%</div>
    <div class="progressbar2" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="10" style="--value:"></div>

Thanks @Yogendra Your answer is 90% closer to my question. But Can't I do it in same class ? I mean in your code, you have added 2 class `ratings1` and `ratings2` But can't we do it just usong one class ? For seperation, it will use js.jquery method to check whether there's a `%` is present or not. — Md. Ibrahim, Jul 07 '23 at 10:33
@Md.Ibrahim, you can do it using single I have used 2 progress-bar to show you how data will show. As per the code Both progess-bar handling both value percentage and without percentage. You can just copy my code snippet and check by swapping the value — Yogendra, Jul 07 '23 at 10:52

Circular progress bar based on percentage

2 Answers2