After spending a day working on this and searching the forum for a solution I haven’t been able to figure out this calculation yet:
I have a countdown that is 604,800 seconds long (don’t worry, not using workflow calls) and I need my progress bar to count up to 100% to show that the time is up… does anyone know how I could set this up in the percentage box?
Have you tried dividing the current number of seconds by the total number of seconds in your countdown? This would yield a percentage that could be displayed in a progress bar.
Yeah, when I do that the progress bar does this weird thing where it irregularly moves around back an forth… no idea why. I know this has to be possible, just a matter of finding the right calculation…
Still looking for a solution. Is there anyone out there that has accomplished a feature like this before?
Is this progress bar a bubble plugin?
Yeah, its a bubble plugin.
How are you accomplishing the countdown?
3 Simple Steps:
I have a work flow updating my custom state called “Current time” every second so I have access to well… the current time haha
In my database I have created a product with a set expiration date.
Then I have set conditions on a text element to change when certain milestones are reached. Here is the formula: Product Expiration Date - Current time = Time Left. Time Left is obviously what I want to display. (I have added a lot of formatting so its easy for my visitors to read) here are my conditions:
If you didn’t catch it my countdown essentially does this:
6 Days, 5 Days 4 Days 3 Days 2 Days, 1 Day, 24 Hours, 23 Hours… all the way to 1 Second then displays “CAMPAIGN HAS ENDED”
Wow. Impressive.
I’ve ran into limitations with the progress bar plugin myself and have resorted to using the HTML element to display a custom progress bar. I found one online that is just a CSS3 animation. What’s nice is you can still insert bubble variables or fields from your DB (Dynamic Text) into the html/css code.
I wonder if you just inserted your percentage calculation into an html element if it would work for you. Pretty simple just insert the dynamic text into the css everywhere it says { width: 55% } (multiple times for browser compatibility). Just replace the 55 with your dynamic text field and leave the %
<!DOCTYPE html>
<html>
<body>
<style>
#progressbar {
width: 100%;
height: 2px;
background-color: #FAFAFA;
padding: 0px;
}
#progress {
background: #00AAFF;
/*-- Color of the bar --*/
height: 15px;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
}
#pbaranim {
height: 15px;
width: 100%;
overflow: hidden;
background: url('http://www.cssdeck.com/uploads/media/items/7/7uo1osj.gif') repeat-x;
-moz-opacity: 0.25;
-khtml-opacity: 0.25;
opacity: 0.25;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
filter: alpha(opacity=25);
}
@-webkit-keyframes progress {
from { }
to { width: 55% }
}
@-moz-keyframes progress {
from { }
to { width: 55% }
}
@-ms-keyframes progress {
from { }
to { width: 55% }
}
@keyframes progress {
from { }
to { width: 55% }
}
</style>
<body>
<div id="progressbar">
<div id="progress" >
</div>
</div>
</body>
</html>
.
Love this idea! However… I’m struggling coming up with an equation that will give me the percentage, any ideas?
You’ll need two numbers; the total duration, and either remaining time or completed time.
completed / total * 100 gives % completed
total - remaining / total * 100 gives % completed
(Bubble’s operators go from left to right)
You can then add floor or round to discard the fractional component.
The workflow action could store time remaining in seconds, instead of the current time, then your conditional expressions would be simpler.
Likely due to its dynamic expression being re-evaluated. You’ll probably get this on a HTML element too if you put the expression into the same HTML that defines the control. A way to prevent this is to have the HTML element define an “updater” function, and another HTML element or “Run Javascript” from the workflow to send it the new value.
Cool, how do you “run javascript” from the workflow?
The Toolbox plugin has an action for this.
A rather long discussion on the plugin, with some examples linked …
This topic was automatically closed after 70 days. New replies are no longer allowed.