<section class="demo-section">
  <h2>Loader</h2>

  <p>Spin:</p>
  <span class="loader loader-sm" role="status" aria-label="Loading"><span class="loader-spin"></span></span>
  <span class="loader loader-md" role="status" aria-label="Loading"><span class="loader-spin"></span></span>
  <span class="loader loader-lg" role="status" aria-label="Loading"><span class="loader-spin"></span></span>

  <p>Dots:</p>
  <span class="loader loader-md loader-dots" role="status" aria-label="Loading"><span></span><span></span><span></span></span>

  <p>Bar:</p>
  <span class="loader loader-md loader-bar" role="progressbar" aria-label="Loading"><span></span></span>

  <p>Block:</p>
  <div class="loader-block">
    <span class="loader loader-lg" role="status" aria-label="Saving"><span class="loader-spin"></span></span>
    <span>Saving changes...</span>
  </div>

  <h3>Vue loader</h3>
  <div id="vue-loader-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnLoader } from "/vue/index.js";

    createApp({
      components: { GnLoader },
      template: `
        <div class="demo-row">
          <gn-loader type="spin" size="md"></gn-loader>
          <gn-loader type="dots" size="md"></gn-loader>
          <gn-loader type="bar" size="md" label="Progress"></gn-loader>
        </div>
      `
    }).mount("#vue-loader-app");
  </script>
</section>