{% extends "layouts/base.html" %}

{% block title %} Progress {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

  <div class="yoo-height-b30 yoo-height-lg-b30"></div>
  <div class="container">
    <div class="yoo-uikits-heading">
      <h2 class="yoo-uikits-title">Progress</h2>
    </div>
  </div>
  <div class="yoo-height-b30 yoo-height-lg-b30"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="yoo-card yoo-style1">
          <div class="yoo-card-heading">
            <div class="yoo-card-heading-left">
              <h2 class="yoo-card-title">General Progressbar</h2>
            </div>
            <div class="yoo-card-heading-right">
              <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#general-progressbar"><ion-icon name="code"></ion-icon></button>
              <!-- Code Modal -->
              <div class="modal fade" id="general-progressbar">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">General Progressbar</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <ion-icon name="close"></ion-icon>
                      </button>
                    </div>
                    <div class="modal-body">
  <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"0"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 25%"</span> <span class="na">aria-valuenow=</span><span class="s">"25"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 50%"</span> <span class="na">aria-valuenow=</span><span class="s">"50"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 75%"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 100%"</span> <span class="na">aria-valuenow=</span><span class="s">"100"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span></code></pre></div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="yoo-card-body">
            <div class="yoo-padd-lr-20">
              <div class="yoo-height-b20 yoo-height-lg-b20"></div>
              <div class="progress mb-3">
                <div class="progress-bar bg-blue-gray" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="progress mb-3">
                <div class="progress-bar bg-blue-gray" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="progress mb-3">
                <div class="progress-bar bg-blue-gray" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="progress mb-3">
                <div class="progress-bar bg-blue-gray" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="progress">
                <div class="progress-bar bg-blue-gray" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            </div>
          </div>
        </div><!-- .yoo-card -->
        <div class="yoo-height-b30 yoo-height-lg-b30"></div>
        <div class="yoo-card yoo-style1">
          <div class="yoo-card-heading">
            <div class="yoo-card-heading-left">
              <h2 class="yoo-card-title">Progress Labels</h2>
            </div>
            <div class="yoo-card-heading-right">
              <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#progress-labels"><ion-icon name="code"></ion-icon></button>
              <!-- Code Modal -->
              <div class="modal fade" id="progress-labels">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Progress Labels</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <ion-icon name="close"></ion-icon>
                      </button>
                    </div>
                    <div class="modal-body">
  <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress with-lables"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 25%;"</span> <span class="na">aria-valuenow=</span><span class="s">"25"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-per"</span><span class="nt">&gt;</span><span class="nt">&lt;span&gt;</span>25%<span class="nt">&lt;/span&gt;</span><span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span></code></pre></div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="yoo-card-body">
            <div class="yoo-padd-lr-20">
              <div class="yoo-height-b20 yoo-height-lg-b20"></div>
              <div class="progress with-lables">
                <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><div class="progress-per"><span>25%</span></div></div>
              </div>
              <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            </div>
          </div>
        </div><!-- .yoo-card -->
        <div class="yoo-height-b30 yoo-height-lg-b30"></div>
        <div class="yoo-card yoo-style1">
          <div class="yoo-card-heading">
            <div class="yoo-card-heading-left">
              <h2 class="yoo-card-title">Withs Backgrounds</h2>
            </div>
            <div class="yoo-card-heading-right">
              <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#withs-backgrounds"><ion-icon name="code"></ion-icon></button>
              <!-- Code Modal -->
              <div class="modal fade" id="withs-backgrounds">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Withs Backgrounds</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <ion-icon name="close"></ion-icon>
                      </button>
                    </div>
                    <div class="modal-body">
  <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 25%;"</span> <span class="na">aria-valuenow=</span><span class="s">"25"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-per"</span><span class="nt">&gt;</span><span class="nt">&lt;span&gt;</span>25%<span class="nt">&lt;/span&gt;</span><span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span></code></pre></div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="yoo-card-body">
            <div class="yoo-padd-lr-20">
              <div class="yoo-height-b20 yoo-height-lg-b20"></div>
              <div class="progress mb-3">
                <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="progress mb-3">
                <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="progress mb-3">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="progress">
                <div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            </div>
          </div>
        </div><!-- .yoo-card -->
        <div class="yoo-height-b30 yoo-height-lg-b30"></div>
        <div class="yoo-card yoo-style1">
          <div class="yoo-card-heading">
            <div class="yoo-card-heading-left">
              <h2 class="yoo-card-title">Multiple bars</h2>
            </div>
            <div class="yoo-card-heading-right">
              <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#multiple-bars"><ion-icon name="code"></ion-icon></button>
              <!-- Code Modal -->
              <div class="modal fade" id="multiple-bars">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Multiple bars</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <ion-icon name="close"></ion-icon>
                      </button>
                    </div>
                    <div class="modal-body">
  <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 15%"</span> <span class="na">aria-valuenow=</span><span class="s">"15"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-success"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 30%"</span> <span class="na">aria-valuenow=</span><span class="s">"30"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-info"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 20%"</span> <span class="na">aria-valuenow=</span><span class="s">"20"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span></code></pre></div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="yoo-card-body">
            <div class="yoo-padd-lr-20">
              <div class="yoo-height-b20 yoo-height-lg-b20"></div>
              <div class="progress">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-secondary" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="yoo-height-b20 yoo-height-lg-b20"></div>
            </div>
          </div>
        </div><!-- .yoo-card -->
        <div class="yoo-height-b30 yoo-height-lg-b30"></div>

      </div><!-- .col -->
    </div>
  </div>
  <div class="yoo-height-b30 yoo-height-lg-b30"></div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}