emptyThickness

Animated

type	values	default
Number|String	>=0 as Number or percent value as String	"5%"

Defines the empty line thickness as a Number >=0 or a percentage value as a String. When specified as a percentage, the thickness is calculated relative to size.

TIP

Make sure to take a look at thickness, lineMode, linePosition and other properties to learn how you can create unique circles

Usage: 📜

<ve-progress :empty-thickness="10" />
<ve-progress empty-thickness="10%" />

Examples

<template>
  <ve-progress :empty-thickness="1" :progress="50" :size="150" />
  <ve-progress :empty-thickness="5" :progress="50" :size="150" />
  <ve-progress :empty-thickness="15" :progress="50" :size="150" />
  <ve-progress :empty-thickness="20" :progress="50" :size="150" />
</template>

NormalLoadingDeterminateNo data

When defined as a string, the thickness can be specified as a percentage, allowing it to scale relative to the size:

<template>
  <ve-progress empty-thickness="10%" :size="100" :progress="50" />
  <ve-progress empty-thickness="10%" :size="200" :progress="50" />
  <ve-progress empty-thickness="10%" :size="300" :progress="50" />
</template>

NormalLoadingDeterminateNo data

In the following example you can see how the thickness of the empty line affects other parts of the circle. Move the slider to see the effect:

<ve-progress :empty-thickness="50" dot="20 white" :progress="50" />

NormalLoadingDeterminateNo data