CSS Progress Circle - Out of a number?

[toolman]

Hi there,

I have a CSS progress circle that displays a percentage.

However, I would like to score the result out of 21 rather than 100%.

This is a working version when it is using a percentage, but I cannot work out how to use a set number rather than a percentage.

Edit fiddle - JSFiddle - Code Playground

Can anyone help me create the progress circle to display out of 21?

The tag {{score.quizScore.scorePointsRounded}} returns a number out of 21.

Any help would be great!

Thanks

[PaulOB]

Does this help?

[toolman]

Thank you so much, that is perfect

[toolman]

Thanks too for making the code easy to read

[toolman]

Hi,

Sorry to bring up an old thread, but I am wondering how you calculated the linear gradients for each one? I now have a circle out of 110, but can’t work out how to calculate each value… Did you do the original 21 divided by 100?

Thanks!

[owenparker]

I presume you got this sorted, but I am pretty sure you would divide 360 (degrees) by the number of gradations you wanted to use. 360/21 is about 17.1. The example moves from 90 to 107.1 to 124.2 to 141.3 to…

If you wanted 110 gradations, just divide 360/110 = 3.3, so 90 to 93.3 to 96.6 to …

HTH

[PaulOB]

The answer above is correct (thank you) but I think my calculations didn’t take into account zero so my example codepen should have been 360 divided by 22 (unless I’m mistaken again or having a brain freeze)

@toolman

now have a circle out of 110,

You mean you want the results out of 110 and not 21 as before?

That means you are going to have write 110 css rules all with different values to display all those. That really would be a job better done with the help of JS I think?

@toolman

Did you do the original 21 divided by 100?

No the linear gradient would be 360degrees for a full circle so each step is 360 / 22 + 90.
90 is the offset for the gradient effect and 22 items allows for zero.

The gradient is basically 2 half circles so you add 16.36 to each of the second gradient rules until you get to 11 and then from 11 onwards you deduct 16.36 from 90 the first part of the gradient to colour the second half of the circle.

e.g.
That gives a value of 16.36 + 90 = 106.36 for the first item.

.progress--circle.progress--1:after {
  background-image: linear-gradient(
      90deg,
      #ddd 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(106.36deg, #63b8ff 50%, #ddd 50%, #ddd);
}

You keep adding the 16.36 in the last part of that gradient until you reach half way at number 11 which then equals 270deg .

Then you deduct 16.36 from 90 for the second half fro number 11 onwards.

e.g.

.progress--circle.progress--11:after {
  background-image: linear-gradient(
      -73.6deg,
      #63b8ff 50%,
      transparent 50%,
      transparent
    ),
    linear-gradient(270deg, #63b8ff 50%, #ddd 50%, #ddd);
}

I notice my original calculations were a bit out so have updated the codepen.

[toolman]

Hi,

Thank you for the reply. I think I understand how you got here

So… for 110 steps, I would need to do 360 / 110 = 3.27

Then 2.27 + 90 until I get to 55 (which is half of the 110)?

And then deduct 2.27 from 90 for the other half?

[PaulOB]

Yes that sounds about right (apart from the typo 3.27 & 2.27)

If you know SASS you could probably write a loop to increment automatically saving you having to type out the css 110 times

[toolman]

Thanks. My SASS is a bit rusty so I will probably have to type them all out. I will see how I get on

[PaulOB]

@toolman

Thanks. My SASS is a bit rusty so

Yes so is mine but I had a go and this seems to work OK (visually at least - still not certain of the math).

You can view compiled CSS to see and copy the actual CSS output.

I also used HAML to create the 110 divs in a couple of lines of code.

Obviously you could do this with js or serverside instead but it was fun playing around although it took me longer than it would have been to copy and paste 110 times

[toolman]

Thank you for helping with that. I had started doing it manually and managed to get up to about 15 with the same as your outputted result

Thank you again for this, this has helped me a lot