Question

Hello I have a variable with the percentages like this:

test = "3%, 7%, 10%, 11%, 50%, 75%, 77%, 82%, 91%, 100%"

It’s a Python/Django variable.

Now, I want to use those numbers to construct a progress bar using Javascript.

I am dumping the variable test as json like:

json.dumps(test)

How do I call it in Javascript and construct the progress bar out of it? Thanks

Answer 1

Do not expect someone to do this kind of work for you, you need to do it yourself. I have provided you with a short example and explanation to help you understand what is going on, the rest is up to you.

Here is a command line example in Python:

import sys, time
print

pers = [3, 7, 10, 11, 50, 75, 77, 82, 91, 100]
for per in pers:
    sys.stdout.write('\r[%s>%s]' % (
        ('=' * ((per / 2) -1)), ' '*(50-(per/2)))
    )
    sys.stdout.flush()
    time.sleep(0.5)

print
print 

Do you understand what is happening here? The basic concept is that you add to the progress out of the total. So, here i used time.sleep(0.5) to add random time in so you can actually see the progress, but when you are writing your javascript code, this will be progressing as whatever you need is loading.

So, once you grasp this idea, simply repeat the same sort of thing in javascript, except instead of adding characters to a string, you are expanding the width of a rectangle or something. And, you want to show progress out of the whole, so you should probably have an identical rectangle already full width directly behind the progress one, showing the total it has left to load. Then format these rectangles with css to make them look nice 🙂