How to create progress bar graphic

jsmoke · 25 Jan 2019 at 22:25

I have to create a circular progress 'bar', so a coloured circle with the X% in the middle. I can't find a widget/control so looks like I will have to produce 100 of them and load them as needed, 100 because 100% etc.

Can you think of a fast auto way of doing this in say PS instead of painstakingly trying to produce 100 images one after the other.

planty · 25 Jan 2019 at 22:29

Is this for a wepage? If so you can do it in css. See https://stackoverflow.com/questions/14222138/css-progress-circle

jsmoke · 25 Jan 2019 at 22:32

It's for an app.

touch · 25 Jan 2019 at 22:54

If you're not able to do it in css and you need to use different images, do you really need 100? If you're displaying the percentage number anyway, 5% resolution is surely enough for the image? You'd only need 20.

Having said that, there must be a better way than loading lots of different images.

jsmoke · 25 Jan 2019 at 23:10

Well it's for an indicator of progress, say a certain task for 56% complete, a certain page would show this kind of thing.

Randomface74 · 25 Jan 2019 at 23:17

Solution:

Code:

Progress: 69%

jsmoke · 25 Jan 2019 at 23:18

I need the fancy graphic.

Rroff · 25 Jan 2019 at 23:22

Do you not have commands to create and write to an image buffer for this? either drawing to the buffer or rotating and copying from another buffer?

jsmoke · 25 Jan 2019 at 23:25

Well ofc I can write however I need 100 separate graphics so I can load in when needed.

Rroff · 25 Jan 2019 at 23:30

jsmoke said:
Well ofc I can write however I need 100 separate graphics so I can load in when needed.

Don't need loads of separate images if you have image commands - look at a code example for rendering a simple analogue clock just a couple of sin and cos calculations and some sqr for the line length or copy and rotate a source image into a buffer procedurally.

planty · 26 Jan 2019 at 11:56

The best way to solve the problem is not with 100 images. Just search for "<app/language> circle progress bar" and I'm sure there will be plenty of other solutions.

touch · 26 Jan 2019 at 15:05

jsmoke said:
Well ofc I can write however I need 100 separate graphics so I can load in when needed.

I still dont see why you'd need 100 images. 20 images in increments of 5% surely would be enough? Who's going to get their protractor out to see if the image exactly matches with the number overlaid?

jsmoke · 26 Jan 2019 at 15:09

Fair point, I see what your saying.

Rroff · 26 Jan 2019 at 19:48

touch said:
I still dont see why you'd need 100 images. 20 images in increments of 5% surely would be enough? Who's going to get their protractor out to see if the image exactly matches with the number overlaid?

Some implementations even only use 10 increments - I'm not a fan of doing it with multiple images anyhow aslong as you have reasonably decent performance graphic commands to read/write buffers and copy/rotate blocks of image data and/or draw 2D primitives it is much better to do it that way than include dozens of images.

If you want to plot a position in a circle around a central point the maths is pretty simple (depending on language, etc. might have to mess about a bit with degrees/radians conversion):

angle=degrees*(pi/180)
x=sin(angle)*linelength
y=cos(angle)*linelength

Then just add x and y to your origin x and y and convert the percentage based on the percentage of 360 degrees for the angle.