Progress bars should be used when there is a determinate amount of time/progress related to a process (e.g., uploading a file). An indeterminate progress can be used in conjunction with a determinate progress bar.
Determinate progress bar
Indeterminate progress bar
Load spinners should be used when there is an indeterminate amount of time/progress related to a process (e.g., downloading data).
Loading button with text
For buttons with text, the load spinner can appear where the icon would appear. The text may change to reflect the current state.
Loading button with icon only
If a simple action is initiated from an icon-only button, the icon can be replaced with the load spinner until the action is complete.
In some situations during the process of loading, it may be desired to overlay and block functionality until loading is complete.
Add invoice confirmation
Refactor templates to use the new templating library
Process payments using third party api
Improve account management workflow
When loading data for the first time or loading additional data, use a flat load spinner with a label.