loader

Animated

type	values	default
Object	{[ thickness, color, lineMode, line, duration, opacity ]}

With this prop defined as Object, you can customize the loading circle that is shown in the states loading and determinate. Accepted properties are color, thickness, line, lineMode, duration and opacity. duration and opacity are specific for loading circle. Any valid CSS opacity value can be set as opacity. duration specifies the speed of the loader animation in milliseconds.

If the loader option is not specified, the loading circle replicates the progress circle with a 0.55 default value for opacity and 1000 duration.

Usage 📜

<ve-progress :loader="{ color: 'green', lineMode: 'in 10', opacity: 0.6, duration: 1200 }" />

Examples

<ve-progress :loader="{ color: '#F08080' }" :progress="50" />
<ve-progress
  :progress="50"
  :loader="{
    color: 'MediumPurple',
    lineMode: 'in 10',
    opacity: 1,
    thickness: 4,
    duration: 4000,
  }"
  :progress="50"
/>
<ve-progress
  :loader="{
    color: {
      radial: true,
      colors: [
        {
          color: '#3260FC',
          offset: '49',
          opacity: 1,
        },
        {
          color: '#3260FC',
          offset: '80',
          opacity: 1,
        },
        {
          color: '#3260FC',
          offset: '100',
          opacity: 0,
        },
      ],
    },
    opacity: 1,
    thickness: 15,
  }"
  :progress="50"
/>

NormalLoadingDeterminateNo data