`emptyColorFill`

Animated: ✔️

type	values	default
String \| Object	any CSS color as String or Object to specify gradient	"transparent"

Defines the fill color of the empty circle. The property accepts any CSS color like #123, rgba(230, 233, 240, 0.1) or lime or an Object to define gradients.

The general scheme to define the gradient is defined like follows:

:color="{ colors [, radial ]}"
- radial - default false. Boolean that defines, whether the gradient is radial or linear
- colors - array that contains the gradient colors as Objects { color: "#6546f7", offset: "10" [, opacity: 1] }

Warning

If you define the colorFill, the empty circle fill area wil be covered by the progress circle.

Tips

According to default SVG behaviour, the fill area of the circle is aligned at the baseline of the empty line. With the emptyLinePosition property this behaviour can be adjusted.

Usage: 📜

<ve-progress empty-color-fill="#3f79ff" />
<ve-progress empty-color-fill="lime" />
<ve-progress empty-color-fill="rgba(230, 233, 240, 0.1)" />
<ve-progress
  :empty-color-fill="{
    radial: false,
    colors: [
      { color: '#6546f7', offset: '0', opacity: 1 },
      { color: 'lime', offset: '100', opacity: 0.6 },
    ],
  }"
/>

Examples

The examples below demonstrate how gradient colors can be defined

The gradients give a lot of room for experimentation and you can achieve a lot of exciting effects with colors alone. The following examples give some inspiration: