<template>
  <q-demo>
    <div
      style="background-color: rgba(0,0,0,0.7); color: #fff; text-align: center; padding: 44px"
    >
      <h1
        style="border-bottom: 1px solid #fff; padding: 22px; border-top: 1px solid #fff;"
      >
        Bounce Type
      </h1>
      <div class="pro-loading pro-loading--bounce">
        <div class="pro-loading__bounce__wrapper">
          <div class="pro-loading__bounce pro-loading__bounce--1"></div>
          <div class="pro-loading__bounce pro-loading__bounce--2"></div>
          <div class="pro-loading__bounce pro-loading__bounce--3"></div>
        </div>
      </div>
      <h1
        style="border-bottom: 1px solid #fff; padding: 22px; border-top: 1px solid #fff;"
      >
        Circle Type
      </h1>
      <div class="pro-loading pro-loading--circle">
        <div class="pro-loading__circle__wrapper">
          <div class="pro-loading__circle--1 pro-loading__circle"></div>
          <div class="pro-loading__circle--2 pro-loading__circle"></div>
          <div class="pro-loading__circle--3 pro-loading__circle"></div>
          <div class="pro-loading__circle--4 pro-loading__circle"></div>
          <div class="pro-loading__circle--5 pro-loading__circle"></div>
          <div class="pro-loading__circle--6 pro-loading__circle"></div>
          <div class="pro-loading__circle--7 pro-loading__circle"></div>
          <div class="pro-loading__circle--8 pro-loading__circle"></div>
          <div class="pro-loading__circle--9 pro-loading__circle"></div>
          <div class="pro-loading__circle--10 pro-loading__circle"></div>
          <div class="pro-loading__circle--11 pro-loading__circle"></div>
          <div class="pro-loading__circle--12 pro-loading__circle"></div>
        </div>
      </div>
      <h1
        style="border-bottom: 1px solid #fff; padding: 22px; border-top: 1px solid #fff;"
      >
        Default Type
      </h1>
      <div class="pro-loading pro-loading--default">
        <div class="pro-loading__default__wrapper">
          <div class="pro-loading__default--1 pro-loading__default"></div>
          <div class="pro-loading__default--2 pro-loading__default"></div>
          <div class="pro-loading__default--3 pro-loading__default"></div>
          <div class="pro-loading__default--4 pro-loading__default"></div>
          <div class="pro-loading__default--5 pro-loading__default"></div>
          <div class="pro-loading__default--6 pro-loading__default"></div>
          <div class="pro-loading__default--7 pro-loading__default"></div>
          <div class="pro-loading__default--8 pro-loading__default"></div>
          <div class="pro-loading__default--9 pro-loading__default"></div>
          <div class="pro-loading__default--10 pro-loading__default"></div>
          <div class="pro-loading__default--11 pro-loading__default"></div>
          <div class="pro-loading__default--12 pro-loading__default"></div>
        </div>
      </div>
    </div>
  </q-demo>
</template>