Fundraising Progress Bar

The Fundraising Progress Bar is a visual web component designed to track and display campaign goals. It features a graphical loading bar that dynamically fills as donations increase, accompanied by text labels showcasing the current dollar amount raised against the total target. There is an option to turn on/off the Spartan helmet in the heading.

Demo

Instructions for use

While editing a page:

1. Move your cursor to the area of the page you wish to add the component.
2. Click the "Insert Component" button in the editor toolbar.
3. Select the Fundraising Progress Bar component from the list.
4. Enter the title of the fundraiser - this will automatically be followed by the text 'Fundraising Goal'.
5. Selects whether to display the Spartan helmet ahead of the title. The default is 'Yes'.
6. Enter the dollar amount that is 50% of your total goal - do not add the '$'.
7. Enter the dollar amount that is 100% of your total goal - do not add the '$'.
8. Add the current percentage of goal met - do not add the '%'.
9. Enter in the current amount raised - include the '$' and any additional text related to the dollar amount.
10. Click the "Save" button.

For future updates, edit the component and modify the 'current percentage' mentioned in step 8, this will automatically adjust the progress bar. You will also want to update the amount entered in step 9.