UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

Progress

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

  • data-e-progress 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.

Last update:
()
Message doc(search): new tags and hidden components --skip-ci
Committer: Tamás Bíró
Version history

Default

Copy Jade
Copy HTML
Show code
Hide code
.e-progress 

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


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

Inverse
Copy Jade
Copy HTML
Show code
Hide code
.e-progress-inverse 

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


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

Static
Copy Jade
Copy HTML
Show code
Hide code
.e-progress-static 

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


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

Small
Copy Jade
Copy HTML
Show code
Hide code
.e-progress-small.e-progress-static 

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


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

With label
Copy Jade
Copy HTML
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 style="width: 60%" class="e-progress__bar"></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 style="width: 60%" class="e-progress__bar"></div>
                                  <div class="e-progress__label">
                                    <div>0</div>
                                    <div>100</div>
                                    <div>200</div>
                                    <div>300</div>
                                  </div>
                                </div>
0
100
200
300

Percent indicator
Copy Jade
Copy HTML
Show code
Hide code
.e-progress-indicator.e-progress-static 

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


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

Small percent indicator
Copy Jade
Copy HTML
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 style="width: 60%" data-e-percent="60%" class="e-progress__bar"></div></div>


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

Service specific variations

DES color variations

success
Copy Jade
Copy HTML
Show code
Hide code
e-progress__bar-success 

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


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

warning
Copy Jade
Copy HTML
Show code
Hide code
e-progress__bar-warning 

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


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

danger
Copy Jade
Copy HTML
Show code
Hide code
e-progress__bar-danger 

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


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