happychin-web/components/Preloader/index.vue

<template>
  <div id="preloader" class="preloader">
    <div class="animation-preloader">
      <div class="spinner"></div>
      <div class="txt-loading">
        <span data-text-preloader="H" class="letters-loading">H</span>
        <span data-text-preloader="A" class="letters-loading">A</span>
        <span data-text-preloader="P" class="letters-loading">P</span>
        <span data-text-preloader="P" class="letters-loading">P</span>
        <span data-text-preloader="Y" class="letters-loading">Y</span>
        &nbsp;
        <span data-text-preloader="C" class="letters-loading">C</span>
        <span data-text-preloader="H" class="letters-loading">H</span>
        <span data-text-preloader="I" class="letters-loading">I</span>
        <span data-text-preloader="N" class="letters-loading">N</span>
      </div>
      <p class="text-center">Loading</p>
    </div>
    <div class="loader">
      <div class="row">
        <div class="col-3 loader-section section-left">
          <div class="bg"></div>
        </div>
        <div class="col-3 loader-section section-left">
          <div class="bg"></div>
        </div>
        <div class="col-3 loader-section section-right">
          <div class="bg"></div>
        </div>
        <div class="col-3 loader-section section-right">
          <div class="bg"></div>
        </div>
      </div>
    </div>
  </div>
</template>