@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "ui-progress-bars", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Progress Bars", "crumbs": "
  • Dashboard
  • UI
  • Progress Bars
    • " })
    Con uses bootstrap-like progress bars.

    Basic

    <div class="progress">
  <div class="white-text" style="width: 40%"></div>
</div>

    With label

    Just add your text inside inner div.
    40%
    <div class="progress">
  <div class="white-text" style="width: 40%">40%</div>
</div>

    Sizes

    Mid
    Big
    Extra
    <div class="progress tiny">
  <div class="white-text" style="width: 40%"></div>
</div>
<div class="progress small">
  <div class="white-text" style="width: 40%"></div>
</div>
<div class="progress">
  <div class="white-text" style="width: 40%">Mid</div>
</div>
<div class="progress big">
  <div class="white-text" style="width: 40%">Big</div>
</div>
<div class="progress extra">
  <div class="white-text" style="width: 40%">Extra</div>
</div>

    Striped

    Uses a gradient to create a striped effect. Not available in IE8. To change colors, use this page css-colors.html
    40%
    20%
    70%
    55%
    90%
    10% 
    <div class="progress">
  <div class="striped" style="width: 40%">
    40%
  </div>
</div>
<div class="progress">
  <div class="striped red" style="width: 20%">
    20%
  </div>
</div>
<div class="progress">
  <div class="striped purple" style="width: 70%">
    70%
  </div>
</div>
<div class="progress cyan lighten-4">
  <div class="striped cyan" style="width: 55%">
    55%
  </div>
</div>
<div class="progress green lighten-4">
  <div class="striped green" style="width: 90%">
    90%
  </div>
</div>
<div class="progress amber lighten-4">
  <div class="striped amber" style="width: 10%">
    10%
  </div>
</div>

    Animated

    To use animated version - add .active class on child container.
    40% 
    <div class="progress">
  <div class="active striped orange" style="width: 40%">
    40%
  </div>
</div>

    Stacked

    Place multiple bars into the same .progress to stack them. 
    <div class="progress grey lighten-2">
  <div class="green" style="width: 35%"></div>
  <div class="purple striped" style="width: 20%"></div>
  <div class="red" style="width: 10%"></div>
</div>

    Indeterminate

    <div class="progress">
  <div class="indeterminate"></div>
</div>

    Circular

    <div class="preloader-wrapper big active">
  <div class="spinner-layer spinner-blue">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>

  <div class="spinner-layer spinner-red">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>

  <div class="spinner-layer spinner-yellow">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>

  <div class="spinner-layer spinner-green">
    <div class="circle-clipper left">
      <div class="circle"></div>
    </div><div class="gap-patch">
      <div class="circle"></div>
    </div><div class="circle-clipper right">
      <div class="circle"></div>
    </div>
  </div>
</div>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })