default

Use this scoped slot, if you want to customize the presentation of the circle legend and make a use of the animated counter, so your formatting still animated. This works similar to the legendFormatter and is just an alternative way to provide a custom format. You can access animated counter properties through the scoped slot props and adjust the presentation of the legend to your needs.

Usage 📜

<ve-progress :progress="50">
  <template #default="{ counterTick }">
    <div>
      {{ counterTick.currentValue }}
    </div>
  </template>
</ve-progress>

Examples

There are really no limits and you can customize the appearance of the legend as you like. Here are a few examples for the beginning:

NormalLoadingDeterminateNo data

NormalLoadingDeterminateNo data

NormalLoadingDeterminateNo data

NormalLoadingDeterminateNo data