ProgressButton

Basic

<script setup lang="ts">
import { ProgressButton } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <progress-button ratio="0.46" />
</template>

Size

<script setup lang="ts">
import { ProgressButton } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <progress-button ratio="0.46" size="large" />
    <progress-button ratio="0.46" size="medium" />
    <progress-button ratio="0.46" size="small" />
</template>

Animate (can stop by clicking)

<script setup lang="ts">
import { ProgressButton } from '@jennifersoft/vue-components-v2';
import { ref, onUnmounted } from 'vue';
const animateRatio = ref(0);

const intervalId = setInterval(() => {
    animateRatio.value += 0.01;
    if (animateRatio.value > 1) {
        animateRatio.value = 0;
    }
}, 100);

onUnmounted(() => {
    clearInterval(intervalId);
});

const stopAnimate = () => {
    clearInterval(intervalId);
};
</script>
<template>
    <progress-button :ratio="animateRatio" @click="stopAnimate" />
</template>