<template>
  <div id="side-menu-loader">
    <div id="side-menu-loader-bar" :style="createStyle(width)"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const width = ref(0)
const createStyle = (size) => {
  return {
    width: `${size}%`,
  }
}

onMounted(() => {
  window.addEventListener('beforeunload', () => {
    setInterval(() => {
      width.value = Math.min(width.value + 0.2, 100)
    }, 25)
  })
})
</script>
