Untitled

<template>
  <div class="loader-content">
    <div class="loader"></div>
    <div class="extra-square"></div>
  </div>
  <div class="modal-backdrop fade show"></div>
</template>

<style scoped>
/* To change size of loader, reduce background-size in the .loader and .extra-square, 
as well as the @keyframes width and height by the same proportion. */
.loader-content {
  display: grid;
  place-items: center;
  position: fixed;
  height: 100px;
  width: 100px;
  left: 47%;
  top: 40%;
  z-index: 999;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.loader {
  margin: auto;
  --b: no-repeat url("~@/assets/moleq_blue_sq.png");
  --w: no-repeat url("~@/assets/moleq_white_sq.png");
  position: absolute;
  background: var(--b) 0 0, var(--w) 0 50%, var(--w) 0 100%, var(--b) 50% 0,
    var(--b) 50% 50%, var(--w) 50% 100%, var(--w) 100% 0, var(--b) 100% 50%,
    var(--b) 100% 100%;
  background-size: 12px 12px;
  animation: moleq 0.5s infinite alternate;
}
.extra-square {
  margin: auto;
  position: absolute;
  top: 42px;
  --b: no-repeat url("~@/assets/moleq_blue_sq.png");
  --w: no-repeat url("~@/assets/moleq_white_sq.png");
  --c: no-repeat linear-gradient(rgba(255, 255, 255, 0));
  background: var(--w) 50% 100%;
  background-size: 12px 12px;
  animation: extra-sq 0.5s infinite alternate;
}

@keyframes moleq {
  0%,
  20% {
    width: 39px;
    height: 39px;
  }
  90%,
  100% {
    width: 54px;
    height: 54px;
  }
}

@keyframes extra-sq {
  0%,
  20% {
    width: 39px;
    height: 39px;
  }
  90%,
  100% {
    width: 54px;
    height: 54px;
  }
}
.modal-backdrop {
  z-index: 998;
}
</style>