How to construct a progress bar from the given percentage?

by

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 🙂

More Related Contents:

  1. Running python on client side
  2. Javascript equivalent of Python’s zip function
  3. Display data streamed from a Flask view as it updates
  4. Running javascript in Selenium using Python
  5. How can I pass data from Flask to JavaScript in a template?
  6. How to convert raw javascript object to a dictionary?
  7. Django csrf token + Angularjs
  8. Pass parameter with Python Flask in external Javascript
  9. Find the longest common starting substring in a set of strings [closed]
  10. Scrolling to top of the page in Python using Selenium
  11. Python library for rendering HTML and javascript [closed]
  12. Display a loading bar before the entire page is loaded
  13. Mechanize and Javascript
  14. How do I wait for a JavaScript __doPostBack call through Selenium and WebDriver
  15. How to call python script from NodeJs
  16. How to decrypt password from JavaScript CryptoJS.AES.encrypt(password, passphrase) in Python
  17. Returning JSON array from a Django view to a template
  18. How to disable a “Reload site? Changes you made may not be saved” popup for (python) selenium tests in chrome?
  19. How can I pass parameter through serialization and then parse them using external JavaScript?
  20. How can I integrate Python and JavaScript?
  21. How to get html with javascript rendered sourcecode by using selenium
  22. How to download an image with Python 3/Selenium if the URL begins with “blob:”?
  23. How do I download a file from FastAPI backend using Fetch API in the frontend?
  24. Does JavaScript support array/list comprehensions like Python?
  25. How can I have a host and container read/write the same files with Docker?
  26. JavaScript timestamp to Python datetime conversion
  27. Disable images in Selenium Python
  28. How can I scrape a page with dynamic content (created by JavaScript) in Python?
  29. FastAPI returns “Error 422: Unprocessable entity” when I send multipart form data with JavaScript Fetch API
  30. Cannot Upload File to FastAPI backend using JavaScript Fetch API in the frontend

Leave a Comment