causeway-standard-theme/causeway/docs/components/status-indicator.html

<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="status-indicator"></a>
      <header class="content-header">
        <h1 class="title">Status/ Progress Indicators</h1>
      </header>
      <p>Status or Progress Indicators are visual indicators of the progress of a task being carried out by the application and to provide feedback to the user.</p>
      <br/>

      <h2 class="title">Explicit: </h2>

      <div class="bs-example-modal">
        <div class="modal explicit-loader" id="myExplicitLoaderExample">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4>Search and Select</h4>
              </div>
              <div class="modal-body">
                <ul class="loader">
                  <li class="completed"><span class="loader-image"></span><span class="loader-message">Saving data Lorem Ipsum Datum...</span></li>
                  <li><span class="loader-image"></span><span class="loader-message">Saving data...</span></li>
                  <li class="status"><span class="loader-message">Finalising report...</span></li>
                </ul>
              </div>
              <div class="modal-footer">
                <a href="javascript:void(0);" data-dismiss="modal">Cancel</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <h2 class="title">Usage</h2>
      <pre><code>
    &lt;div class=&quot;modal explicit-loader&quot; id=&quot;myExplicitLoader&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
          &lt;div class=&quot;modal-header&quot;&gt;
            &lt;h4&gt;Search and Select&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-body&quot;&gt;
            &lt;ul class=&quot;loader&quot;&gt;
              &lt;li class=&quot;completed&quot;&gt;&lt;span class=&quot;loader-image&quot;&gt;&lt;/span&gt;&lt;span class=&quot;loader-message&quot;&gt;Saving data Lorem Ipsum Datum...&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class=&quot;loader-image&quot;&gt;&lt;/span&gt;&lt;span class=&quot;loader-message&quot;&gt;Saving data...&lt;/span&gt;&lt;/li&gt;
              &lt;li class=&quot;status&quot;&gt;&lt;span class=&quot;loader-message&quot;&gt;Finalising report...&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class=&quot;modal-footer&quot;&gt;
            &lt;a href=&quot;javascript:void(0);&quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      </code></pre>
      <br/>
      <a data-toggle="modal" href="#myExplicitLoader" href="javascript:void(0)">Trigger Explicit Status/ Progress Indicator</a>

      <div class="modal explicit-loader" id="myExplicitLoader" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4>Search and Select</h4>
            </div>
            <div class="modal-body">
              <ul class="loader">
                <li class="completed"><span class="loader-image"></span><span class="loader-message">Saving data Lorem Ipsum Datum...</span></li>
                <li><span class="loader-image"></span><span class="loader-message">Saving data...</span></li>
                <li class="status"><span class="loader-message">Finalising report...</span></li>
              </ul>
            </div>
            <div class="modal-footer">
              <a href="javascript:void(0);" data-dismiss="modal">Cancel</a>
            </div>
          </div>
        </div>
      </div>
      <h2 class="title">
        Trigger via Javascript
      </h2>
      <pre><code>
    $('#myExplicitLoader').modal()
      </code></pre>
      <br/>
      <br/>

      <h2 class="title">Implicit: Text only (with ellipsis) </h2>
      <div class="text-loader">Updating Address Book</div>
      <h2 class="title">Usage</h2>
      <pre><code>
    &lt;div class=&quot;text-loader&quot;&gt;Updating Address Book&lt;/div&gt;
      </code></pre>
      <br/>
      <br/>

      <h2 class="title">Implicit: Numerical Count (with ellipsis) </h2>
      <div class="text-loader">Updating Address Book <span class="count">16/25</span> pages complete</div>
      <h2 class="title">Usage</h2>
      <pre><code>
    &lt;div class=&quot;text-loader&quot;&gt;Updating Address Book &lt;span class=&quot;count&quot;&gt;16/25&lt;/span&gt; pages complete&lt;/div&gt;
      </code></pre>
      <br/>
      <br/>

      <h2 class="title">Implicit: Progress bar</h2>
      <div class="progress-loader">
        Updating progress bar
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          </div>
        </div>
      </div>
      <br/>
      <div class="progress-loader">
        Updating progress bar
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
          </div>
        </div>
      </div>
      <br/>
      <div class="progress-loader">
        Updating progress bar
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
          </div>
        </div>
      </div>
      <h2 class="title">Usage</h2>
      <pre><code>
    &lt;div class=&quot;progress-loader&quot;&gt;
      Updating progress bar
      &lt;div class=&quot;progress&quot;&gt;
        &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;&lt;!--pass the current value of the progress--&gt;&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: &lt;!--pass the current value of the progress in percentage--&gt;&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      </code></pre>
      <br/>
      <br/>
      <h2 class="title">Implicit: Numerical Count with Loading Icon</h2>
      <div class="text-loader"><span class="loader-image"></span>Updating Address Book <span class="count">16/25</span> pages complete</div>
      <h2 class="title">Usage</h2>
      <pre><code>
    &lt;div class=&quot;text-loader&quot;&gt;
      &lt;span class=&quot;loader-image&quot;&gt;&lt;/span&gt;Updating Address Book &lt;span class=&quot;count&quot;&gt;16/25&lt;/span&gt; pages complete
    &lt;/div&gt;
      </code></pre>
    </section>
  </div>
</div>