Progress bar in notices using CSS

[Andy.N]

Can anyone help with a simple CSS code that can be use in Notices to display some simple text, url and a progress bar with a goal of $10,000 and the current donation.

Thank you.

 

[Paul B]

You can't do that automatically with HTML and CSS, you would have to manually update it all the time.

Try this for a start:

<table style="width: 100%"><tr><td style="height: 10px; width: 25%; border: 1px solid #666666; background-color: #999999"></td><td style="width: 75%; border: 1px solid #666666; background-color: #CCCCCC"></td></tr></table>

Obviously you can add text above/below explaining what it is and adjust the percentages to suit, etc.

 

[Andy.N]

You can't do that automatically with HTML and CSS, you would have to manually update it all the time.

Try this for a start:

<table style="width: 100%"><tr><td style="height: 10px; width: 25%; border: 1px solid #666666; background-color: #999999"></td><td style="width: 75%; border: 1px solid #666666; background-color: #CCCCCC"></td></tr></table>

Yes, we will update it manually.
How do we have the 25% and 75% automatically calculated when we just enter the amount received/goal?

 

[Paul B]

Well you can remove the second width attribute, so all you need to do then is enter the percentage of the current donations versus the total.

<table style="width: 100%"><tr><td style="height: 10px; width:25%; border: 1px solid #666666; background-color: #999999"></td><td style="border: 1px solid #666666; background-color: #CCCCCC"></td></tr></table>

You will need to work that out manually though.

Unless xen:calc is supported in notices; I don't think it is though as I just tried this and it didn't work:
width: {xen:calc '1500 / 10000 * 100'}%