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

Progress

Progress indicators inform the users that the system is retrieving data or any other slow computation is taking place. They take predictable amount of time before they are finished.

You can use this component displaying progress state of your application. You'll need Javascript to fill the percentages:

  • data-e-percent should be filled with a string you want to display in the middle of the progress bar (eg. '60%')
  • style="width: 60%" should be filled with the current progress

Both attributes should be on the <div class="e-progress__bar"></div> element.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-progress

<div class="e-progress">
  <div class="e-progress__bar" data-e-percent="60" style="width: 60%"></div>
  <div class="e-progress__label"></div></div>
<div class="e-progress">
  <div class="e-progress__bar" data-e-percent="60" style="width: 60%"></div>
  <div class="e-progress__label"></div></div>
JavaScript
Copy JavaScript

Inverse
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-progress-inverse

<div class="e-progress e-progress-inverse">
  <div class="e-progress__bar" data-e-percent="60" style="width: 60%"></div></div>
<div class="e-progress e-progress-inverse">
  <div class="e-progress__bar" data-e-percent="60" style="width: 60%"></div></div>
JavaScript
Copy JavaScript

Static
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-progress-static

<div class="e-progress e-progress-static">
  <div class="e-progress__bar" data-e-percent="60" style="width: 60%"></div></div>
<div class="e-progress e-progress-static">
  <div class="e-progress__bar" data-e-percent="60" style="width: 60%"></div></div>
JavaScript
Copy JavaScript

Small
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-progress-small.e-progress-static

<div class="e-progress e-progress-static e-progress-small">
  <div class="e-progress__bar" style="width: 60%"></div></div>
<div class="e-progress e-progress-static e-progress-small">
  <div class="e-progress__bar" style="width: 60%"></div></div>
JavaScript
Copy JavaScript

With label
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-progress-small.e-progress-static

<div class="e-progress e-progress-static e-progress-small e-progress-has_label">
  <div class="e-progress__bar" style="width: 60%"></div>
  <div class="e-progress__label">
    <div>
      0
    </div>
    <div>
      100
    </div>
    <div>
      200
    </div>
    <div>
      300
    </div>
  </div>
</div>
<div class="e-progress e-progress-static e-progress-small e-progress-has_label">
  <div class="e-progress__bar" style="width: 60%"></div>
  <div class="e-progress__label">
    <div>
      0
    </div>
    <div>
      100
    </div>
    <div>
      200
    </div>
    <div>
      300
    </div>
  </div>
</div>
JavaScript
Copy JavaScript
0
100
200
300

Percent indicator
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-progress-indicator.e-progress-static

<div class="e-progress e-progress-static e-progress-indicator">
  <div class="e-progress__bar" style="width: 18%" data-e-percent="18%"></div></div>
<div class="e-progress e-progress-static e-progress-indicator">
  <div class="e-progress__bar" style="width: 18%" data-e-percent="18%"></div></div>
JavaScript
Copy JavaScript

Small percent indicator
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-progress-indicator.e-progress-static.e-progress-small

<div class="e-progress e-progress-static e-progress-small e-progress-indicator">
  <div class="e-progress__bar" style="width: 60%" data-e-percent="60%"></div></div>
<div class="e-progress e-progress-static e-progress-small e-progress-indicator">
  <div class="e-progress__bar" style="width: 60%" data-e-percent="60%"></div></div>
JavaScript
Copy JavaScript

Service specific variations

DES color variations

success
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-progress__bar-success

<div class="e-progress e-progress-static">
  <div class="e-progress__bar e-progress__bar-success" data-e-percent="60" style="width: 60%"></div></div>
<div class="e-progress e-progress-static">
  <div class="e-progress__bar e-progress__bar-success" data-e-percent="60" style="width: 60%"></div></div>
JavaScript
Copy JavaScript

warning
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-progress__bar-warning

<div class="e-progress e-progress-static">
  <div class="e-progress__bar e-progress__bar-warning" data-e-percent="60" style="width: 60%"></div></div>
<div class="e-progress e-progress-static">
  <div class="e-progress__bar e-progress__bar-warning" data-e-percent="60" style="width: 60%"></div></div>
JavaScript
Copy JavaScript

danger
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-progress__bar-danger

<div class="e-progress e-progress-static">
  <div class="e-progress__bar e-progress__bar-danger" data-e-percent="60" style="width: 60%"></div></div>
<div class="e-progress e-progress-static">
  <div class="e-progress__bar e-progress__bar-danger" data-e-percent="60" style="width: 60%"></div></div>
JavaScript
Copy JavaScript

Progress

Progress indicators inform the users that the system is retrieving data or any other slow computation is taking place. They take predictable amount of time before they are finished.

Best practices

Progress should:

  • Be used for displaying system processes where the completeness of the task can be determined at any point of time. These tasks can be importing, exporting, uploading, etc.
  • Display hints to help the user plan their time:
    • Percentage,
    • Number of sub-tasks completed,
    • Remaining time.
  • Be either cancellable or running in the background, so the user can continue their work if the process takes longer than a few seconds.
  • Make clear to users that a time-consuming process is happening.
  • Make clear to users that things are completely normal.
  • Make clear to users how much more time the process will take.
  • Provide a way for users to cancel the operation and regain control of the program.

Try to avoid:

  • Using progress to show processes with short duration or indeterminate duration. Use a spinner instead.
  • Showing no progress while initial calculations (for example how much time something takes). Show the indeterminate animated progress bar as a temporary replacement of the component.
  • Non continuous progress (like huge jumps).

Content guidelines

Progress label:

  • It should be placed at the right end of the dynamic progress bar. What it displays depends on the kind of progress that is being processed, e.g. '33%', '120 of 980 contacts', '85 MB', etc.
  • This should indicate a dynamic percentage value, like “25% uploaded”, a static statement that is specific for the process, like "Exporting your data...", or could change as the process progresses, like "Uploading files 5 of 9".