A single visual indicator should be used to represent each type of operation. For example, a refresh operation should display either a refresh bar or an activity circle, but not both.
Additional button types include:
Determinate indicators display how long an operation will take.
Indeterminate indicators visualize an unspecified wait time.
Linear
Circular
Loading content in phases
Loading additional content
When indicators are determinate they indicate how long an operation will take when the percentage complete is detectable.
When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.
Both linear and circular progress indicators may be either determinate or indeterminate.
Getting your files
Loading content for the first time
Query indicator on a webpage
Circular progress indicators Dark Theme
A circular loader may be integrated with a button.
A circular loader may be used to load something on hover.