Creating a Progress Bar for an email - html-email

Question

I have created a progress bar which changes by adjusting the width. It looks like this:
Progress bar code:
<tr>
<td valign="top" class="textContent" style="background-color:#65b9a6;text- align:center;color:#FFFFFF;font-size:20px;padding-top:5px;padding-bottom:5px;" >
100%
</td>
</tr>
<tr>
<td valign="top" class="textContent" style="font- size:16px;color:#616161;padding-top:10px;" >
</td>
</tr>
I really like the look and feel of the progress bar above, but I am looking for a way to adjust the progress of the bar through an API, which I think could be done with the code below as it can be adjusted based on progress such as: https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml5_progress
Is there a way to incorporate both these codes to create a better progress bar?

Answer 1

Not sure what you're asking. If you want to modify the progress bar as result of an action, you can run this JavaScript code every time you want to update the progress:
document.getElementById("elementName").style.width = "100";
(In which elementName is the name of the ID assigned to the green portion, and "100" is the width of the progress bar)
If you have text, you can update it like so:
document.getElementById("elementName").innerHTML = "Text";
(In which elementName is the name of the ID assigned to the text element, and "Text" is the text you want it to display)
If you use the progress element, you can update it like this:
document.getElementById("elementName").value = "100";
(In which elementName is the name of the id assigned to the progress element, and "100" is the amount completed in relation to the max value assigned in your HTML.)
If you want it to be a static animation that fills up over a static amount of time, you can animate it using CSS:
#elementName {
animation: progressFill 1s;
}
#keyframes progressFill {
from {width: 0%;}
to {width: 100%;}
}
(In which #elementName is the name of the id assigned to the green portion, progressFill is the desired name for the animation, and 1s is the length of the animation. This is, of course, assuming that width: 0%; and width: 100%; provide the desired results.)
I hope this helps.