Progress

Default
.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
.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
.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
.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
.e-progress-small.e-progress-static

0
100
200
300
<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>

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

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 feat(components): use stylelint rules
Date:
()
Committer: rudywaltz
Component history