Progressbar

Example Usage

Example

0%

<template>
  <!-- <Toast /> -->
  <SkProgressbar :value="value1"> </SkProgressbar>
</template>

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

onMounted(() => {
  startProgress();
});

onBeforeUnmount(() => {
  endProgress();
});

// const toast = useToast();
const value1 = ref(0);
const interval = ref();
const startProgress = () => {
  interval.value = setInterval(() => {
    let newValue = value1.value + Math.floor(Math.random() * 40) + 1;
    if (newValue >= 100) {
      newValue = 100;
      // toast.add({
      //   severity: 'info',
      //   summary: 'Success',
      //   detail: 'Process Completed',
      //   life: 100000,
      // });
      endProgress();
    }
    value1.value = newValue;
  }, 2000);
};
const endProgress = () => {
  clearInterval(interval.value);
  interval.value = null;
};
</script>

Reference

Properties

Name	Type	Default	Description
v-model	ref	null	The value to edit

Events

Name	Parameters	Description
@input	event	the payload of the input

Slots

Name	Parameters	Description