temporary

[meloalright]

[meloalright]

$ npm install -g @vue/cli

$ vue create Live-Demo
# select vue 3 preset

$ npm init vite-app demo

<template>
  <h1>
    <a href="https://github.com/meloalright/vue3-progress">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="207"
        height="28"
        role="img"
        aria-label="VUE3-PROGRESS: VIEW"
      >
        <title>VUE3-PROGRESS: VIEW</title>
        <g shape-rendering="crispEdges">
          <rect width="150" height="28" fill="#555" />
          <rect x="150" width="57" height="28" fill="#97ca00" />
        </g>
        <g
          fill="#fff"
          text-anchor="middle"
          font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
          text-rendering="geometricPrecision"
          font-size="100"
        >
          <image
            x="9"
            y="7"
            width="14"
            height="14"
            xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJ3aGl0ZXNtb2tlIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+R2l0SHViIGljb248L3RpdGxlPjxwYXRoIGQ9Ik0xMiAuMjk3Yy02LjYzIDAtMTIgNS4zNzMtMTIgMTIgMCA1LjMwMyAzLjQzOCA5LjggOC4yMDUgMTEuMzg1LjYuMTEzLjgyLS4yNTguODItLjU3NyAwLS4yODUtLjAxLTEuMDQtLjAxNS0yLjA0LTMuMzM4LjcyNC00LjA0Mi0xLjYxLTQuMDQyLTEuNjFDNC40MjIgMTguMDcgMy42MzMgMTcuNyAzLjYzMyAxNy43Yy0xLjA4Ny0uNzQ0LjA4NC0uNzI5LjA4NC0uNzI5IDEuMjA1LjA4NCAxLjgzOCAxLjIzNiAxLjgzOCAxLjIzNiAxLjA3IDEuODM1IDIuODA5IDEuMzA1IDMuNDk1Ljk5OC4xMDgtLjc3Ni40MTctMS4zMDUuNzYtMS42MDUtMi42NjUtLjMtNS40NjYtMS4zMzItNS40NjYtNS45MyAwLTEuMzEuNDY1LTIuMzggMS4yMzUtMy4yMi0uMTM1LS4zMDMtLjU0LTEuNTIzLjEwNS0zLjE3NiAwIDAgMS4wMDUtLjMyMiAzLjMgMS4yMy45Ni0uMjY3IDEuOTgtLjM5OSAzLS40MDUgMS4wMi4wMDYgMi4wNC4xMzggMyAuNDA1IDIuMjgtMS41NTIgMy4yODUtMS4yMyAzLjI4NS0xLjIzLjY0NSAxLjY1My4yNCAyLjg3My4xMiAzLjE3Ni43NjUuODQgMS4yMyAxLjkxIDEuMjMgMy4yMiAwIDQuNjEtMi44MDUgNS42MjUtNS40NzUgNS45Mi40Mi4zNi44MSAxLjA5Ni44MSAyLjIyIDAgMS42MDYtLjAxNSAyLjg5Ni0uMDE1IDMuMjg2IDAgLjMxNS4yMS42OS44MjUuNTdDMjAuNTY1IDIyLjA5MiAyNCAxNy41OTIgMjQgMTIuMjk3YzAtNi42MjctNS4zNzMtMTItMTItMTIiLz48L3N2Zz4="
          />
          <text
            fill="#fff"
            x="835"
            y="175"
            transform="scale(.1)"
            textLength="1090"
          >
            VUE3-PROGRESS
          </text>
          <text
            fill="#fff"
            x="1785"
            y="175"
            font-weight="bold"
            transform="scale(.1)"
            textLength="330"
          >
            VIEW
          </text>
        </g>
      </svg>
    </a>
  </h1>
  <button @click="toggle">{{ run ? "finish()" : "start()" }}</button>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      run: false,
    };
  },
  created() {
    this.toggle();
  },
  methods: {
    toggle() {
      this.run ? this.$progress.finish() : this.$progress.start();
      this.run = !this.run;
    },
  },
};
</script>
<style scoped>
button {
  cursor: pointer;
}
</style>

<template>
  <vue3-progress />
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld />
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
<style scoped>
img {
  min-height: 200px;
}
</style>