File: /home/imensosw/www/imenso.co/demo/zuruuna/administrator/templates/ui-progress.liquid
{% layout 'layout' %}
{% block title %}Progress Bars{% endblock %}
{% block breadcrumb %}
<li><a href="index.php">Home</a></li>
<li><a href="#">UI Elements</a></li>
<li class="active"><a href="ui-progress.html">Progress Bars</a></li>
{% endblock %}
{% block styles %}
{% endblock %}
{% block scripts %}
{% endblock %}
{% block content %}
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2>Progress Bars</h2>
<div class="options">
<div class="options">
<ul class="nav nav-tabs">
<li class="active"><a href="#domprogress" data-toggle="tab"><i class="fa fa-desktop"></i></a></li>
<li><a href="#codeprogress" data-toggle="tab"><i class="fa fa-code"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<p>Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
<h3>Default Progress Bars</h3>
<p>Default progress bars are simple and css driven.</p>
<p>Primary with <code>progress-bar-primary</code> class.</p>
<div class="tab-content">
<div class="tab-pane active" id="domprogress">
<div class="progress">
<div class="progress-bar progress-bar-primary" style="width: 20%"></div>
</div>
<p>Info with <code>progress-bar-info</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 60%"></div>
</div>
<p>Success with <code>progress-bar-success</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 30%"></div>
</div>
<p>Warning with <code>progress-bar-warning</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 70%"></div>
</div>
<p>Danger with <code>progress-bar-danger</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 50%"></div>
</div>
<p>Inverse with <code>progress-bar-inverse</code> class.</p>
<div class="progress">
<div class="progress-bar progress-bar-inverse" style="width: 40%"></div>
</div>
</div>
<div class="tab-pane" id="codeprogress">
<pre class="prettyprint linenums">
<div class="progress">
<div class="progress-bar progress-bar-primary" style="width: 20%"></div>
</div>
</pre>
</div>
</div>
</div>
<div class="col-md-12">
<h3>Striped Progress Bars</h3>
<p>Sriped Progress bars made with CSS3 gradients, just add the <code>progress-striped</code> class</p>
<p><span class="label label-info">Note</span> Does not work with browsers that do not support CSS3 gradients or animations, like IE9</p>
<p>Info</p>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width: 30%"></div>
</div>
</div>
<div class="col-md-12">
<h3>Animated Progressbars</h3>
<p>Animated progressbars with CSS3, just add a class <code>active</code> with <code>progress-striped</code></p>
<p>Inverse</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-inverse" style="width: 55%"></div>
</div>
</div>
<div class="col-md-12">
<h3>Stacking progressbars</h3>
<p>You can stack one progressbar on top of another simply by including them all in the same <code>div.progress</code></p>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2>Progress Bars</h2>
<div class="options">
<ul class="nav nav-tabs">
<li class="active"><a href="#domcontext" data-toggle="tab"><i class="fa fa-desktop"></i></a></li>
<li><a href="#codecontext" data-toggle="tab"><i class="fa fa-code"></i></a></li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<h3 class="mt0">Contextual Progressbars</h3>
<p>Have thinner progress bars with details.</p>
<div class="tab-content">
<div class="tab-pane active" id="domcontext">
<div class="contextual-progress">
<div class="clearfix">
<div class="progress-title">Task #1</div>
<div class="progress-percentage">25%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 25%"></div>
</div>
</div>
<div class="contextual-progress">
<div class="clearfix">
<div class="progress-title">Task #2</div>
<div class="progress-percentage">50%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-primary" style="width: 50%"></div>
</div>
</div>
<div class="contextual-progress">
<div class="clearfix">
<div class="progress-title">Task #3</div>
<div class="progress-percentage">3%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 3%"></div>
</div>
</div>
<div class="contextual-progress">
<div class="clearfix">
<div class="progress-title">Task #4</div>
<div class="progress-percentage">33%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 33%"></div>
</div>
</div>
<div class="contextual-progress">
<div class="clearfix">
<div class="progress-title">Task #5</div>
<div class="progress-percentage">78%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 78%"></div>
</div>
</div>
<div class="contextual-progress" style="border-bottom: 0; padding-bottom: 0;">
<div class="clearfix">
<div class="progress-title">Task #6</div>
<div class="progress-percentage">44%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-inverse" style="width: 44%"></div>
</div>
</div>
</div>
<div class="tab-pane" id="codecontext">
<pre class="prettyprint linenums mb0">
<div class="contextual-progress">
<div class="clearfix">
<div class="progress-title">Task #1</div>
<div class="progress-percentage">25%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 25%"></div>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}