Spinner
Use spinner to inform marketers that the system is retrieving or synchronizing data, that might take undetermined but short time before finishes.
Variations
With text
<e-spinner data-text="Loading..."></e-spinner>
<e-spinner data-text="Loading..."></e-spinner>Small
<e-spinner data-size="small" data-text="Loading..."></e-spinner>
<e-spinner data-size="small" data-text="Loading..."></e-spinner>Table
<e-icon icon="pencil" type="table"></e-icon>
<e-spinner data-size="table"></e-spinner>
<e-icon icon="trash-o" type="table"></e-icon>
<e-icon icon="pencil" type="table"></e-icon><e-spinner data-size="table"></e-spinner><e-icon icon="trash-o" type="table"></e-icon>API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| data-text | Text label | string | ||
| data-size | Large, small or table size | string | ||
| data-fullscreen | Horizontal and Vertical centered position | boolean | false |
Spinner
Use spinner to inform marketers that the system is retrieving or synchronizing data, that might take undetermined but short time before finishes.
Structure
Best practices
Spinners should:
- Be positioned to indicate where the result of the progress will be placed. Think about it as a placeholder.
- Have a steady animation so the user knows that something is happening.
- Be paired with a label next to the indicator that gives extra context.
- Give a feeling of continuity when multiple data is being processed in a row. To achieve this, provide a spinner one by one sequentially for each piece of data.
- Be used when the operation falls around these keywords:
- Fetching...
- Uploading...
- Signing in...
- Connecting...
Try to avoid:
- Using spinner to indicate a progress which takes a determined length of time to be completed. Use a Progress Bar instead.
- Unnecessarily restrain marketers while a long computation is taking place. Let them finish other tasks without interrupting the loading. When the process is finished, send them a notification with a link to the affected area.
- Visually overwhelm the screen by putting multiple spinners in the same content box. As a rule of thumb don’t let the user see more than four spinners on the screen at the same time.
- Spinners when the operation falls around these keywords:
- Loading...
- Retrieving...
- Installing...
Content guidelines
Spinner labels
Spinner labels should:
- Start with a capital letter.
- Give extra context if it helps the user understand the situation better.
- Be short and to the point.
- Use present continuous form.