{% extends 'layouts/vertical.html' %}

{% load static i18n %}

{% block title %}Spinners{% endblock title %}

{% block extra_css %}

<link rel="stylesheet" href="{% static 'plugins/spinkit/spinkit.min.css' %}">

{% endblock extra_css %}

{% block page_content %}

<div class="container-fluid">
  {% include 'partials/page-title.html' with title='Spinners' subtitle='UI' %}
</div>
<!-- container -->

<div class="container-xl">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Examples</h4>
        </div>

        <div class="card-body">
          <p class="text-muted mb-2">
            Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS,
            and no JavaScript.
          </p>

          <a class="btn btn-link p-0 fw-semibold" href="https://getbootstrap.com/docs/5.3/components/spinners/"
             target="_blank">
            Spinners on Bootstrap
            <i class="ti ti-chevron-right ms-1"></i>
          </a>
        </div>
      </div>
    </div> <!-- end col -->

    <div class="col-xl-6">
      <div class="card">
        <div class="card-header">
          <div class="flex-grow-1">
            <h4 class="card-title">Border Spinner</h4>
          </div>
          <div class="card-action">
            <a href="#!" class="card-action-item" data-action="card-toggle"><i class="ti ti-chevron-up"></i></a>
            <a href="#!" class="card-action-item" data-action="code-collapse"><i class="ti ti-code"></i></a>
          </div>
        </div>

        <div class="code-body">
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border m-2&quot; role=&quot;status&quot;&gt;
                                            &lt;span class=&quot;visually-hidden&quot;&gt;Loading...&lt;/span&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre> <!-- end highlight-->
        </div> <!-- end preview code-->

        <div class="card-body">
          <p class="text-muted">Use border spinners as lightweight loading indicators.</p>

          <div class="spinner-border m-2" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
        </div> <!-- end card-body -->
      </div> <!-- end card-->


      <div class="card">
        <div class="card-header">
          <div class="flex-grow-1">
            <h4 class="card-title">Colors</h4>
          </div>
          <div class="card-action">
            <a href="#!" class="card-action-item" data-action="card-toggle"><i class="ti ti-chevron-up"></i></a>
            <a href="#!" class="card-action-item" data-action="code-collapse"><i class="ti ti-code"></i></a>

          </div>
        </div>

        <div class="code-body">
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border text-primary m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border text-secondary m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border text-success m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border text-danger m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border text-warning m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border text-info m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border text-light m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border text-dark m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>
                                </pre> <!-- end highlight-->
        </div> <!-- end preview code-->

        <div class="card-body">
          <p class="text-muted">Use text color utilities like <code>.text-primary</code>, <code>.text-success</code>, or
            <code>.text-danger</code> to style the spinner, which inherits its color from <code>currentColor</code>.</p>

          <div>
            <div class="spinner-border text-primary m-2" role="status"></div>
            <div class="spinner-border text-secondary m-2" role="status"></div>
            <div class="spinner-border text-success m-2" role="status"></div>
            <div class="spinner-border text-danger m-2" role="status"></div>
            <div class="spinner-border text-warning m-2" role="status"></div>
            <div class="spinner-border text-info m-2" role="status"></div>
            <div class="spinner-border text-light m-2" role="status"></div>
            <div class="spinner-border text-dark m-2" role="status"></div>
            <div class="spinner-border text-purple m-2" role="status"></div>
          </div>
        </div> <!-- end card-body -->
      </div> <!-- end card-->

      <div class="card">
        <div class="card-header">
          <div class="flex-grow-1">
            <h4 class="card-title">Alignment</h4>
          </div>
          <div class="card-action">
            <a href="#!" class="card-action-item" data-action="card-toggle"><i class="ti ti-chevron-up"></i></a>
            <a href="#!" class="card-action-item" data-action="code-collapse"><i class="ti ti-code"></i></a>

          </div>
        </div>

        <div class="code-body">
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class=&quot;d-flex justify-content-center&quot;&gt;
                                            &lt;div class=&quot;spinner-border&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre> <!-- end highlight-->
        </div> <!-- end preview code-->

        <div class="card-body">
          <p class="text-muted">Bootstrap spinners use <code>rem</code>, <code>currentColor</code>, and <code>inline-flex</code>
            for easy sizing and alignment.</p>

          <div class="d-flex align-items-center">
            <strong>Loading...</strong>
            <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
          </div>

          <div class="d-flex justify-content-center mt-3">
            <div class="spinner-border" role="status"></div>
          </div>
        </div> <!-- end card-body -->
      </div> <!-- end card-->

      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Buttons Spinner</h4>
          <div class="card-action">
            <a href="#!" class="card-action-item" data-action="card-toggle"><i class="ti ti-chevron-up"></i></a>
            <a href="#!" class="card-action-item" data-action="code-collapse"><i class="ti ti-code"></i></a>

          </div>
        </div>

        <div class="code-body">
                                <pre>
                                    <code class="language-markup">
                                        &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot; disabled&gt;
                                            &lt;span class=&quot;spinner-border spinner-border-sm&quot; role=&quot;status&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;&lt;span class=&quot;visually-hidden&quot;&gt;Loading...&lt;/span&gt;
                                        &lt;/button&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot; disabled&gt;
                                            &lt;span class=&quot;spinner-border spinner-border-sm me-1&quot; role=&quot;status&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                                            Loading...
                                        &lt;/button&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot; disabled&gt;
                                            &lt;span class=&quot;spinner-grow spinner-grow-sm&quot; role=&quot;status&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; &lt;span class=&quot;visually-hidden&quot;&gt;Loading...&lt;/span&gt;
                                        &lt;/button&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot; disabled&gt;
                                            &lt;span class=&quot;spinner-grow spinner-grow-sm me-1&quot; role=&quot;status&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                                            Loading...
                                        &lt;/button&gt;
                                    </code>
                                </pre> <!-- end highlight-->
        </div> <!-- end preview code-->

        <div class="card-body">
          <div class="row g-3">
            <div class="col-lg-6">
              <div class="d-flex flex-wrap gap-2">
                <button class="btn btn-primary btn-icon" type="button" disabled>
                  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span
                  class="visually-hidden">Loading...</span>
                </button>
                <button class="btn btn-primary btn-icon rounded-circle" type="button" disabled>
                  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span
                  class="visually-hidden">Loading...</span>
                </button>
                <button class="btn btn-primary" type="button" disabled>
                  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span
                  class="visually-hidden">Loading...</span>
                </button>
                <button class="btn btn-primary" type="button" disabled>
                  <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                  Loading...
                </button>
              </div>
            </div><!-- end col -->
            <div class="col-lg-6">
              <div class="d-flex flex-wrap gap-2">
                <button class="btn btn-primary btn-icon" type="button" disabled>
                  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span
                  class="visually-hidden">Loading...</span>
                </button>
                <button class="btn btn-primary btn-icon rounded-circle" type="button" disabled>
                  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span
                  class="visually-hidden">Loading...</span>
                </button>
                <button class="btn btn-primary" type="button" disabled>
                  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span
                  class="visually-hidden">Loading...</span>
                </button>
                <button class="btn btn-primary" type="button" disabled>
                  <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
                  Loading...
                </button>
              </div>
            </div><!-- end col -->
          </div> <!-- end row -->
        </div> <!-- end card-body -->
      </div> <!-- end card-->
    </div> <!-- end col -->

    <div class="col-xl-6">
      <div class="card">
        <div class="card-header">
          <div class="flex-grow-1">
            <h4 class="card-title">Growing Spinner</h4>
          </div>
          <div class="card-action">
            <a href="#!" class="card-action-item" data-action="card-toggle"><i class="ti ti-chevron-up"></i></a>
            <a href="#!" class="card-action-item" data-action="code-collapse"><i class="ti ti-code"></i></a>

          </div>
        </div>

        <div class="code-body">
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow m-2&quot; role=&quot;status&quot;&gt;
                                            &lt;span class=&quot;visually-hidden&quot;&gt;Loading...&lt;/span&gt;
                                        &lt;/div&gt;
                                    </code>
                                </pre> <!-- end highlight-->
        </div> <!-- end preview code-->

        <div class="card-body">
          <p class="text-muted">Bootstrap spinners use <code>rem</code>, <code>currentColor</code>, and <code>inline-flex</code>
            for easy resizing, coloring, and alignment.</p>

          <div class="spinner-grow m-2" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
        </div> <!-- end card-body -->
      </div> <!-- end card-->

      <div class="card">
        <div class="card-header">
          <div class="flex-grow-1">
            <h4 class="card-title">Color Growing Spinner</h4>
          </div>
          <div class="card-action">
            <a href="#!" class="card-action-item" data-action="card-toggle"><i class="ti ti-chevron-up"></i></a>
            <a href="#!" class="card-action-item" data-action="code-collapse"><i class="ti ti-code"></i></a>

          </div>
        </div>

        <div class="code-body">
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow text-primary m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow text-secondary m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow text-success m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow text-danger m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow text-warning m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow text-info m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow text-light m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow text-dark m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>
                                </pre> <!-- end highlight-->
        </div> <!-- end preview code-->

        <div class="card-body">
          <p class="text-muted">The grow spinner also uses <code>currentColor</code>, so apply classes like <code>.text-primary</code>,
            <code>.text-warning</code>, or <code>.text-info</code> to customize its color.</p>

          <div>
            <div class="spinner-grow text-primary m-2" role="status"></div>
            <div class="spinner-grow text-secondary m-2" role="status"></div>
            <div class="spinner-grow text-success m-2" role="status"></div>
            <div class="spinner-grow text-danger m-2" role="status"></div>
            <div class="spinner-grow text-warning m-2" role="status"></div>
            <div class="spinner-grow text-info m-2" role="status"></div>
            <div class="spinner-grow text-light m-2" role="status"></div>
            <div class="spinner-grow text-dark m-2" role="status"></div>
            <div class="spinner-grow text-purple m-2" role="status"></div>
          </div>
        </div> <!-- end card-body -->
      </div> <!-- end card-->

      <div class="card">
        <div class="card-header">
          <div class="flex-grow-1">
            <h4 class="card-title">Size</h4>
          </div>
          <div class="card-action">
            <a href="#!" class="card-action-item" data-action="card-toggle"><i class="ti ti-chevron-up"></i></a>
            <a href="#!" class="card-action-item" data-action="code-collapse"><i class="ti ti-code"></i></a>

          </div>
        </div>

        <div class="code-body">
                                <pre>
                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border avatar-lg text-primary m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow avatar-lg text-secondary m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border avatar-md text-primary m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow avatar-md text-secondary m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border avatar-sm text-primary m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow avatar-sm text-secondary m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-border spinner-border-sm m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>

                                    <code class="language-markup">
                                        &lt;div class=&quot;spinner-grow spinner-grow-sm m-2&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
                                    </code>
                                </pre> <!-- end highlight-->
        </div> <!-- end preview code-->

        <div class="card-body">
          <div class="row">
            <div class="col-lg-6">
              <div class="spinner-border avatar-lg text-primary m-2" role="status"></div>
              <div class="spinner-grow avatar-lg text-secondary m-2" role="status"></div>
            </div><!-- end col -->

            <div class="col-lg-6">
              <div class="spinner-border avatar-md text-primary m-2" role="status"></div>
              <div class="spinner-grow avatar-md text-secondary m-2" role="status"></div>
            </div><!-- end col -->

            <div class="col-lg-6">
              <div class="spinner-border avatar-sm text-primary m-2" role="status"></div>
              <div class="spinner-grow avatar-sm text-secondary m-2" role="status"></div>
            </div><!-- end col -->

            <div class="col-lg-6">
              <div class="spinner-border spinner-border-sm m-2" role="status"></div>
              <div class="spinner-grow spinner-grow-sm m-2" role="status"></div>
            </div><!-- end col -->
          </div><!--end row-->
        </div> <!-- end card-body -->
      </div> <!-- end card-->
    </div>

    <!-- SpinKit -->
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <div class="flex-grow-1">
            <h4 class="card-title">SpinKit <span class="badge badge-soft-warning">CSS Based Plugin</span></h4>
          </div>
          <div class="card-action">
            <a href="https://tobiasahlin.com/spinkit/" target="_blank" class="card-action-item"><i
              class="ti ti-external-link"></i></a>
            <a href="#!" class="card-action-item" data-action="card-toggle"><i class="ti ti-chevron-up"></i></a>
            <a href="#!" class="card-action-item" data-action="code-collapse"><i class="ti ti-code"></i></a>
          </div>
        </div>

        <div class="card-body">
          <div class="row mb-5">
            <div class="col">
              <!-- Plane -->
              <div class="sk-plane mx-auto"></div>
            </div>
            <div class="col">
              <!-- Chase -->
              <div class="sk-chase mx-auto">
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
              </div>
            </div>
            <div class="col">
              <!-- Bounce -->
              <div class="sk-bounce mx-auto">
                <div class="sk-bounce-dot"></div>
                <div class="sk-bounce-dot"></div>
              </div>
            </div>
            <div class="col">
              <!-- Wave -->
              <div class="sk-wave mx-auto">
                <div class="sk-wave-rect"></div>
                <div class="sk-wave-rect"></div>
                <div class="sk-wave-rect"></div>
                <div class="sk-wave-rect"></div>
                <div class="sk-wave-rect"></div>
              </div>
            </div>
          </div>

          <div class="row mb-5">
            <div class="col">
              <!-- Pluse -->
              <div class="sk-pulse mx-auto"></div>
            </div>
            <div class="col">
              <!-- Swing -->
              <div class="sk-swing mx-auto">
                <div class="sk-swing-dot"></div>
                <div class="sk-swing-dot"></div>
              </div>
            </div>
            <div class="col">
              <!-- Circle -->
              <div class="sk-circle mx-auto">
                <div class="sk-circle-dot"></div>
                <div class="sk-circle-dot"></div>
                <div class="sk-circle-dot"></div>
                <div class="sk-circle-dot"></div>
                <div class="sk-circle-dot"></div>
                <div class="sk-circle-dot"></div>
                <div class="sk-circle-dot"></div>
                <div class="sk-circle-dot"></div>
                <div class="sk-circle-dot"></div>
                <div class="sk-circle-dot"></div>
                <div class="sk-circle-dot"></div>
                <div class="sk-circle-dot"></div>
              </div>
            </div>
            <div class="col">
              <!-- Circle Fade -->
              <div class="sk-circle-fade mx-auto">
                <div class="sk-circle-fade-dot"></div>
                <div class="sk-circle-fade-dot"></div>
                <div class="sk-circle-fade-dot"></div>
                <div class="sk-circle-fade-dot"></div>
                <div class="sk-circle-fade-dot"></div>
                <div class="sk-circle-fade-dot"></div>
                <div class="sk-circle-fade-dot"></div>
                <div class="sk-circle-fade-dot"></div>
                <div class="sk-circle-fade-dot"></div>
                <div class="sk-circle-fade-dot"></div>
                <div class="sk-circle-fade-dot"></div>
                <div class="sk-circle-fade-dot"></div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-3">
              <!-- Grid -->
              <div class="sk-grid mx-auto">
                <div class="sk-grid-cube"></div>
                <div class="sk-grid-cube"></div>
                <div class="sk-grid-cube"></div>
                <div class="sk-grid-cube"></div>
                <div class="sk-grid-cube"></div>
                <div class="sk-grid-cube"></div>
                <div class="sk-grid-cube"></div>
                <div class="sk-grid-cube"></div>
                <div class="sk-grid-cube"></div>
              </div>
            </div>
            <div class="col-3">
              <!-- Fold -->
              <div class="sk-fold mx-auto">
                <div class="sk-fold-cube"></div>
                <div class="sk-fold-cube"></div>
                <div class="sk-fold-cube"></div>
                <div class="sk-fold-cube"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> <!-- end col -->
  </div> <!-- end row -->
</div> <!-- container -->

{% endblock page_content %}