Types
Loader
A loader
![](/images/wireframe/short-paragraph.png)
Text Loader
A loader can contain text
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
States
Indeterminate
A loader can show it's unsure of how long a task will take
![](/images/wireframe/short-paragraph.png)
Active
A loader can be active or visible
![](/images/wireframe/short-paragraph.png)
Disabled
A loader can be disabled or hidden
![](/images/wireframe/short-paragraph.png)
Variations
Inline
Loaders can appear inline with content
Inline Center
Loaders can appear inline centered with content
Size
Loaders can have different sizes
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
Inverted
Loaders can have their colors inverted.
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)