vue scss 로딩 페이지

npm add -D sass

<template>
  <div class="loading">
    <h1 class="counter" >{{ counter}}</h1>
    <div class="overlay">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <div class="conetent"></div>
  </div>
</template>
    
<script setup>
import { ref, onMounted } from "vue";
import gsap from "gsap";

const counter = ref(0);

const updateCounter = () => {
    if(counter.value === 100){
        return;
    }
    counter.value += Math.floor(Math.random() * 10) + 1;

    if(counter.value > 100){
        counter.value = 100;
    }

    let delay = Math.floor(Math.random() * 200) + 50;
    setTimeout(updateCounter, delay)
}

onMounted(()=>{
    updateCounter();

    gsap.to(".counter", 0.25, {
        delay: 3.5,
        opacity: 0,
    })

    gsap.to(".bar", 1.5, {
        delay: 3.5,
        height:0,
        stagger: {
            amount: 0.5
        },
        ease: "power4.inOut"
    })
})
</script>
    
<style lang="scss">
.overlay {
  font-family: var(--apple);
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  display: flex;

  .bar {
    width: 20vw;
    height: 105vh;
    background: #1a1a1a;
  }
}

.counter {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 10000;
  color: #bcbcc4;
  padding: 0.2em 0.4em;
  font-size: 20vw;
  font-weight: 900;
}
</style>