Jump to content
UBot Underground

[FREE] HTML5 Progress Bar Source Code for (STD/PRO/DEV)


Recommended Posts

  • 2 weeks later...

Someone asked for an example of this using an actual list that is looped through,,, so, here is an example (there are obviously other ways to do this, and this is a very basic example).

 

Hope this helps...

add list to list(%mylist, $list from text("apple,orange,pear,mango,grape,pizza,hotdog,hamburger,tomato,celery,onion,corn,beans,cheeze,milk", ","), "Delete", "Global")
set(#progress, 0, "Global")
ui html panel("<body>
<progress variable=\"#progress\" fillwith=\"value\" max=\"100\" style=\"width:300px;\"></progress>
<b><span variable=\"#progress\" fillwith=\"innerhtml\"></span>%</b>
</body>", "")
set(#loopcount, 1, "Global")
loop($list total(%mylist)) {
    load html("Loop: {#loopcount} of  {$list total(%mylist)}<br><b>{$next list item(%mylist)}</b>")
    set(#progress, $eval("var tmp1 =  {$multiply($divide(#loopcount, $list total(%mylist)), 100)}; tmp2 = Math.floor(tmp1);
tmp2"), "Global")
    increment(#loopcount)
}


  • Like 1
Link to post
Share on other sites

this give's error can't divide 2 strings in the eval

Oops, yea, i forgot to get rid of the #looptotal variable in a spot... I updated the code... thanks.

Link to post
Share on other sites

Has anyone a idea on how to get this to work with a wait command?

I am trying to do a countdown on a 12 sec wait and update the progress bar with the % of the wait.

What i have tried so far but it's not working that good in to calculate how long 1 loops takes in seconds and use loops to mach the wait command,the problem is that some loops takes longer than other so it will go out of sync after a while.

Link to post
Share on other sites

Has anyone a idea on how to get this to work with a wait command?

I am trying to do a countdown on a 12 sec wait and update the progress bar with the % of the wait.

What i have tried so far but it's not working that good in to calculate how long 1 loops takes in seconds and use loops to mach the wait command,the problem is that some loops takes longer than other so it will go out of sync after a while.

 

Not sure what "out of sync" means because it infers a relationship to some other loop being synced together WITH the wait.... But, if I am wrong, and the progress bar simply has to update according to the length of the wait, I don't see why doing a loop with a 1 second wait per loop for 12 loops would not suffice to replace a 12 second wait time unless you are trying to be incredibly accurate down to fractions of a second for some reason, in which case a progress bar is probably not a great idea anyway. I have done (I think) exactly this once to display a countdown that waits for the next process to take place. Mine waited for like 5 minutes and that's how I did it was to make a loop to replace the wait and incremented it off. I have since found an even easier way to do this whole progress bar idea... I'll post it below....  To solve your wait command 12 second example, use the code below and replace 57 in the #kisslooptotal with 12, and change the wait command to 1 second. Will this work for what you are trying to do?  In fact, when I was doing this I needed to do this in so many places that I made the below code into a custom command just so I could drag it in as easily as I could a regular wait command.

Link to post
Share on other sites

Here is a K.I.S.S Version of using this progress bar I've been using lately... (KISS Stands for "Keep It Simple Stupid"... I think its an American thing so figured I better clarify:)

 

Hopefully it helps some people out, I think its pretty straight forward, if not, feel free to ask questions...

ui html panel("<html><body><span variable=\"#kissprogress\" fillwith=\"innerhtml\"></span></body></html>", 100)
set(#kisslooptotal, 57, "Global")
set(#kissloopcount, 0, "Global")
loop(#kisslooptotal) {
    increment(#kissloopcount)
    wait(0.10)
    set(#kissprogress, "<progress id=\'p\' max=\"{#kisslooptotal}\" value=\"{#kissloopcount}\"></progress>", "Global")
}

  • Like 1
Link to post
Share on other sites
  • 6 months later...
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...