Description
The update_bar function dynamically updates the content and value of a progress bar component in an HTML document.
It updates three elements: the progress bar's percentage value, its associated descriptive text, and an optional header.
Parameters
| Parameter | Type | Description |
|---|---|---|
percent |
number | The percentage value to update the progress bar. This value is applied to the value attribute of an HTML <progress> element with the ID percent. |
text |
string (optional) | The descriptive text to display alongside the progress bar. If provided, it updates the inner content of an HTML element with the ID progress_text. Default is an empty string (""). |
header |
string (optional) | An optional header for the progress bar section. If provided, it updates the inner content of an HTML element with the ID progress_header. Default is an empty string (""). |
Behavior
- Update Progress Text:
If an element with the ID
progress_textexists, itsinnerHTMLis updated with thetextparameter. - Update Progress Header:
If an element with the ID
progress_headerexists, itsinnerHTMLis updated with theheaderparameter. - Update Progress Bar Value:
The function modifies the
valueattribute of the<progress>element with the IDpercentto reflect thepercentparameter.
Example Usage
// Update the progress bar to 50%, with a descriptive text and header
update_bar(50, "Loading data...", "Data Upload Progress");
// Update the progress bar to 75%, with only descriptive text
update_bar(75, "Processing...");
// Update the progress bar to 100%, without any text or header
update_bar(100);
Requirements
- The following HTML elements must exist in the document for the function to work as intended:
- A
<progress>element with the IDpercentfor the progress bar. - A text container (e.g.,
<p>,<div>) with the IDprogress_textfor descriptive text. - A header container (e.g.,
<h3>,<div>) with the IDprogress_headerfor the header.
- A
Notes
If the required elements (progress_text, progress_header, or percent) are not present in the DOM, the function skips their updates without throwing errors.
Use this function in combination with dynamic progress updates for a seamless user experience in tasks like file uploads, processing, or loading states.