thickness

Animated

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

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

TIP

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

Usage: 📜

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

Examples

<template>
  <ve-progress :thickness="1" :progress="50" :size="150" />
  <ve-progress :thickness="5" :progress="50" :size="150" />
  <ve-progress :thickness="15" :progress="50" :size="150" />
  <ve-progress :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 thickness="10%" :size="100" :progress="50" />
  <ve-progress thickness="10%" :size="200" :progress="50" />
  <ve-progress thickness="10%" :size="300" :progress="50" />
</template>

NormalLoadingDeterminateNo data

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

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

NormalLoadingDeterminateNo data