Updating the progress status in the checkout flow

The last thing we want to improve for the checkout flow on the Cart page is to update the progress component as the tab panes are switched. In the Shopping Cart tab pane, initially, the progress should be 0 percent, and when the switch to the Shipping Details tab pane happens, the progress should be updated to 33 percent. When the form on the Shipping Details tab pane is submitted and the switch to the Payment Options tab pane happens, the progress should be updated to 67 percent. Finally, when the form on the Payment Options tab pane has been submitted and the success message has been displayed, the progress should be updated to 100 percent.

To update the progress component, we need to change the width property and the aria-valuenow attribute of the .progress-bar element (a child element of the progress component). The value of the aria-valuenow attribute will be updated directly with JavaScript, and the value of the width property...