{% import 'components/panel.html' as panel %}

<div class="{{ containerClass }} page-section">
  {% call panel.component(title='Sizes', description='A simple yet versatile animated spinner component. Add <code>.loader-[sm|lg]</code> or <code>.is-loading-[sm|lg]</code> to create loaders at different sizes.') %}
    <div class="loader-list">
      <div class="loader loader-lg"></div>
      <div class="loader"></div>
      <div class="loader loader-sm"></div>
    </div>
  {% endcall %}

  {% call panel.component(title='Colors', description='Using Bootstrap’s typical naming structure i.e. <code>.loader-primary</code>, you can create colored loaders depending on your needs.') %}
    <div class="loader-list">
      <div class="loader loader-primary"></div>
      <div class="loader loader-secondary"></div>
      <div class="loader loader-success"></div>
      <div class="loader loader-danger"></div>
      <div class="loader loader-warning"></div>
      <div class="loader loader-info"></div>
      <div class="loader loader-dark"></div>
      <div class="loader loader-light"></div>
    </div>
  {% endcall %}

  {% call panel.component(title='Helper', description='Indicate loading state of nearly any component with an <code>.is-loading</code> modifier.') %}
    <div class="button-list">
      <a href="#" class="btn btn-primary is-loading is-loading-sm">Button</a>
      <a href="#" class="btn btn-outline-primary is-loading is-loading-sm">Button</a>
    </div>
  {% endcall %}
</div>