noData

Animated

type	values	default
Boolean		false

The noData state is perfect for when your data is missing. The progress circle remains empty, clearly indicating the absence of data. In this state, the component hides the legend, making it noticeable that there's no data or an error occurred during loading.

Invalid progress

The component will take the no data state also if you provide an invalid progress value

<ve-progress noData />
<ve-progress :noData="true" />

Examples

<ve-progress :noData="true" :progress="50">
  <template #legend>
      <span>/100</span>
  </template>
  <template #legend-caption>
      <span>i'm a caption</span>
  </template>
</ve-progress>

<ve-progress :noData="true" progress="Bad progress">
  <template #legend-caption>
      <span>Bad progress</span>
  </template>
</ve-progress>

NormalLoadingDeterminateNo data