conjure-frontend/src/components/Loader.vue

<script setup>
// https://codepen.io/jkantner/pen/YzdpEVO

defineProps({
  variant: Number
})
</script>

<template>
  <svg
    class="pl1"
    v-if="!variant || variant === 1"
    viewBox="0 0 128 128"
    width="128px"
    height="128px"
  >
    <defs>
      <linearGradient id="pl-grad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#000" />
        <stop offset="100%" stop-color="#fff" />
      </linearGradient>
      <mask id="pl-mask">
        <rect x="0" y="0" width="128" height="128" fill="url(#pl-grad)" />
      </mask>
    </defs>
    <g fill="var(--vt-c-munsell)">
      <g class="pl1__g">
        <g transform="translate(20,20) rotate(0,44,44)">
          <g class="pl1__rect-g">
            <rect class="pl1__rect" rx="8" ry="8" width="40" height="40" />
            <rect
              class="pl1__rect"
              rx="8"
              ry="8"
              width="40"
              height="40"
              transform="translate(0,48)"
            />
          </g>
          <g class="pl1__rect-g" transform="rotate(180,44,44)">
            <rect class="pl1__rect" rx="8" ry="8" width="40" height="40" />
            <rect
              class="pl1__rect"
              rx="8"
              ry="8"
              width="40"
              height="40"
              transform="translate(0,48)"
            />
          </g>
        </g>
      </g>
    </g>
    <g fill="var(--vt-c-silver)" mask="url(#pl-mask)">
      <g class="pl1__g">
        <g transform="translate(20,20) rotate(0,44,44)">
          <g class="pl1__rect-g">
            <rect class="pl1__rect" rx="8" ry="8" width="40" height="40" />
            <rect
              class="pl1__rect"
              rx="8"
              ry="8"
              width="40"
              height="40"
              transform="translate(0,48)"
            />
          </g>
          <g class="pl1__rect-g" transform="rotate(180,44,44)">
            <rect class="pl1__rect" rx="8" ry="8" width="40" height="40" />
            <rect
              class="pl1__rect"
              rx="8"
              ry="8"
              width="40"
              height="40"
              transform="translate(0,48)"
            />
          </g>
        </g>
      </g>
    </g>
  </svg>
  <svg class="pl2" v-if="variant === 2" viewBox="0 0 128 24" width="128px" height="24px">
    <g fill="var(--vt-c-silver)">
      <g class="pl2__rect-g">
        <rect
          class="pl2__rect"
          rx="8"
          ry="8"
          x="0"
          y="24"
          width="40"
          height="24"
          transform="rotate(180)"
        />
      </g>
      <g class="pl2__rect-g">
        <rect
          class="pl2__rect"
          rx="8"
          ry="8"
          x="44"
          y="24"
          width="40"
          height="24"
          transform="rotate(180)"
        />
      </g>
      <g class="pl2__rect-g">
        <rect
          class="pl2__rect"
          rx="8"
          ry="8"
          x="88"
          y="24"
          width="40"
          height="24"
          transform="rotate(180)"
        />
      </g>
    </g>
    <g fill="var(--vt-c-munsell)" mask="url(#pl-mask)">
      <g class="pl2__rect-g">
        <rect
          class="pl2__rect"
          rx="8"
          ry="8"
          x="0"
          y="24"
          width="40"
          height="24"
          transform="rotate(180)"
        />
      </g>
      <g class="pl2__rect-g">
        <rect
          class="pl2__rect"
          rx="8"
          ry="8"
          x="44"
          y="24"
          width="40"
          height="24"
          transform="rotate(180)"
        />
      </g>
      <g class="pl2__rect-g">
        <rect
          class="pl2__rect"
          rx="8"
          ry="8"
          x="88"
          y="24"
          width="40"
          height="24"
          transform="rotate(180)"
        />
      </g>
    </g>
  </svg>
</template>

<style scoped>

svg {
  margin: auto;
}

.pl1,
.pl2,
.pl3 {
  display: block;
  width: 8em;
  height: 8em;
}
.pl1__g,
.pl1__rect,
.pl2__rect,
.pl2__rect-g,
.pl3__rect {
  animation: pl1-a 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.pl1__g {
  transform-origin: 64px 64px;
}
.pl1__rect:first-child {
  animation-name: pl1-b;
}
.pl1__rect:nth-child(2) {
  animation-name: pl1-c;
}
.pl2__rect,
.pl2__rect-g {
  animation-name: pl2-a;
}
.pl2__rect {
  animation-name: pl2-b;
}
.pl2__rect-g .pl2__rect {
  transform-origin: 20px 24px;
}
.pl2__rect-g:first-child,
.pl2__rect-g:first-child .pl2__rect {
  animation-delay: -0.25s;
}
.pl2__rect-g:nth-child(2),
.pl2__rect-g:nth-child(2) .pl2__rect {
  animation-delay: -0.125s;
}
.pl2__rect-g:nth-child(2) .pl2__rect {
  transform-origin: 64px 24px;
}
.pl2__rect-g:nth-child(3) .pl2__rect {
  transform-origin: 108px 24px;
}
.pl3__rect {
  animation-name: pl3;
}
.pl3__rect-g {
  transform-origin: 64px 64px;
}

@keyframes pl1-b {
  from {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    width: 40px;
    height: 40px;
  }
  20% {
    animation-timing-function: steps(1, start);
    width: 40px;
    height: 0;
  }
  60% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    width: 0;
    height: 40px;
  }
  80%,
  to {
    width: 40px;
    height: 40px;
  }
}
@keyframes pl1-c {
  from {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    width: 40px;
    height: 40px;
    transform: translate(0, 48px);
  }
  20% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    width: 40px;
    height: 64px;
    transform: translate(0, 0);
  }
  40% {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    width: 40px;
    height: 40px;
    transform: translate(0, 0);
  }
  60% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    width: 88px;
    height: 40px;
    transform: translate(0, 0);
  }
  80%,
  to {
    width: 40px;
    height: 40px;
    transform: translate(48px, 0);
  }
}

@keyframes pl2-a {
  from,
  25%,
  66.67%,
  to {
    transform: translateY(0);
  }
  50% {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    transform: translateY(-80px);
  }
}
@keyframes pl2-b {
  from,
  to {
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
    width: 40px;
    height: 12px;
    transform: rotate(180deg) translateX(0);
  }
  33.33% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    width: 20px;
    height: 32px;
    transform: rotate(180deg) translateX(10px);
  }
  66.67% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
    width: 28px;
    height: 24px;
    transform: rotate(180deg) translateX(6px);
  }
}
</style>