Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Spinner

Use spinner to inform marketers that the system is retrieving or synchronizing data, that might take undetermined but short time before finishes.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-spinner

<e-spinner></e-spinner>
<e-spinner></e-spinner>
JavaScript
Copy JavaScript

Variations

Small
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-size="small"

<e-spinner data-size="small"></e-spinner>
<e-spinner data-size="small"></e-spinner>
JavaScript
Copy JavaScript

Medium
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-size="medium"

<e-spinner data-size="medium"></e-spinner>
<e-spinner data-size="medium"></e-spinner>
JavaScript
Copy JavaScript

Large
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-size="large"

<e-spinner data-size="large"></e-spinner>
<e-spinner data-size="large"></e-spinner>
JavaScript
Copy JavaScript

Table
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-size="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>
JavaScript
Copy JavaScript

With text
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-text="Loading..."

<e-spinner data-text="Loading..."></e-spinner>
<e-spinner data-text="Loading..."></e-spinner>
JavaScript
Copy JavaScript

Fullscreen
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-fullscreen="true"

<div style="position: relative; height: 300px;">
  <e-spinner data-fullscreen="true"></e-spinner>
</div>
<div style="position: relative; height: 300px;">
  <e-spinner data-fullscreen="true"></e-spinner>
</div>
JavaScript
Copy JavaScript

API Reference

Properties

NameDescriptionTypeRequiredDefault value
data-textText labelstring
data-sizeLarge, small or table sizestringlarge
data-fullscreenHorizontal and Vertical centered positionbooleanfalse

Spinner

Use spinner to inform marketers that the system is retrieving or synchronizing data, that might take undetermined but short time before finishes.

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 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.