`color`

Animated

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

Defines the color of progress circle line. The property accepts any CSS color like #123, rgba(230, 233, 240, 0.1) or lime or an Object defining gradients.

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

:color="{ colors [, radial ]}"
- radial (optional): Boolean, default is false. Defines whether the gradient is radial or linear.
- colors: Array of objects defining the gradient colors. Each object should have:
  - color: CSS color string (e.g., "#6546f7")
  - offset: String representing the relative start/stop position in the gradient (e.g., "10"). It should be a number between 0 and 100.
  - opacity (optional): Number representing the opacity (e.g., 1)

Usage: 📜

vue

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

SVG Gradient

The coloring concept is based on the SVG specification. Only offset and opacity are supported for now. In the future releases, more advanced gradient features will be added

Conic gradient

You asked for it,, years later we still miss the ability to define conic gradients for SVG elements. Nevertheless, I'll show you an interesting workaround with dot

Examples

Define the color as string is straightforward.

vue

<template>
  <ve-progress color="DimGray" :progress="50" :size="150" />
  <ve-progress color="#1ABC9C" :progress="50" :size="150" />
  <ve-progress color="rgba(255, 87, 51, 0.7)" :progress="50" :size="150" />
  <ve-progress :color="color4" :progress="50" :size="150" />
</template>
<script setup lang="ts">
import randomColor from "randomcolor";
import { onMounted, ref } from "vue";

const color4 = ref(randomColor());

onMounted(() => {
  setInterval(() => {
    color4.value = randomColor();
  }, 1000);
});
</script>

The examples below demonstrate how gradient colors can be defined. Make sure to switch circle states to see, what cool loader affects you can achieve with gradient colors.

vue

<template>
  <ve-progress :color="gradient1" thickness="10%" :progress="50" :size="150" />
  <ve-progress :color="gradient2" thickness="10%" :progress="50" :size="150" />
  <ve-progress :color="gradient3" thickness="30%" :progress="50" :size="150" />
  <ve-progress :color="gradient4" thickness="30%" :progress="50" :size="150" />
</template>
<script lang="ts">
import randomColor from "randomcolor";
export type Gradient = {
  colors: {
    color: string;
    offset: string;
    opacity?: number;
  }[];
  radial?: boolean;
};

export const gradient1 = {
  colors: [
    {
      color: "#3498DB",
      offset: "0",
    },
    {
      color: "#8A2BE2",
      offset: "100",
    },
  ],
};
export const gradient2 = {
  colors: [
    {
      color: "#3498DB",
      offset: "0",
    },
    {
      color: "rgb(72, 201, 176)",
      offset: "25",
    },
    {
      color: "hsl(48, 89%, 60%, 0.2)",
      offset: "50",
    },
    {
      color: "Crimson",
      offset: "75",
    },
    {
      color: "#8A2BE2",
      offset: "100",
    },
  ],
};
export const gradient3 = {
  radial: true,
  colors: [
    {
      color: "#3498DB",
      offset: "0",
      opacity: 0.5,
    },
    {
      color: "rgb(72, 201, 176)",
      offset: "25",
    },
    {
      color: "hsl(48, 89%, 60%, 0.2)",
      offset: "50",
    },
    {
      color: "Crimson",
      offset: "75",
    },
    {
      color: "#8A2BE2",
      offset: "100",
    },
  ],
};
export const gradient4 = {
  colors: [
    {
      color: "#3498DB",
      offset: "0",
    },
    {
      color: "hsl(48, 89%, 60%, 0.2)",
      offset: "50",
    },
    {
      color: "#8A2BE2",
      offset: "100",
    },
  ],
};

export const randomizeGradient = (gradient: Gradient) => {
  gradient.colors = gradient.colors.map((conf) => ({
    ...conf,
    color: randomColor(),
  }));
  return gradient;
};

export default {
  setup() {
    return { gradient1, gradient2, gradient3, gradient4 };
  },
  onMounted() {
    setInterval(() => {
      randomizeGradient(gradient4);
    }, 1000);
  },
};
</script>

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:

vue

<template>
  <ve-progress v-for="(c, i) in circles" v-bind="c" :progress="50" :key="i" />
</template>
<script lang="ts">
export const circle1 = {
  thickness: 40,
  color: {
    radial: true,
    colors: [
      {
        color: "#3260FC",
        offset: "50",
        opacity: "0.15",
      },
      {
        color: "#3260FC",
        offset: "70",
        opacity: "0.15",
      },
      {
        color: "#3260FC",
        offset: "70",
        opacity: "0.1",
      },
      {
        color: "#3260FC",
        offset: "90",
        opacity: "1",
      },
      {
        color: "#3260FC",
        offset: "60",
        opacity: "1",
      },
      {
        color: "#3260FC",
        offset: "0",
        opacity: "0",
      },
    ],
  },
};
export const circle2 = {
  thickness: 50,
  line: "butt",
  color: {
    radial: true,
    colors: [
      {
        color: "#3260FC",
        offset: "50",
        opacity: "0.15",
      },
      {
        color: "#3260FC",
        offset: "70",
        opacity: "0.15",
      },
      {
        color: "#3260FC",
        offset: "70",
        opacity: "0.1",
      },
      {
        color: "#3260FC",
        offset: "90",
        opacity: "1",
      },
      {
        color: "#3260FC",
        offset: "60",
        opacity: "1",
      },
      {
        color: "#3260FC",
        offset: "0",
        opacity: "0",
      },
    ],
  },
};
export const circle3 = {
  thickness: 10,
  emptyThickness: 2,
  line: "round",
  color: {
    radial: true,
    colors: [
      {
        color: "#3260FC",
        offset: "96",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "98",
        opacity: 1,
      },
      {
        color: "#e6e9f0",
        offset: "99.9",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "100",
        opacity: 1,
      },
    ],
  },
};
export const circle4 = {
  thickness: 100,
  emptyThickness: 2,
  line: "butt",
  lineMode: "in-over",
  color: {
    radial: true,
    colors: [
      {
        color: "#3260FC",
        offset: "49",
        opacity: 1,
      },
      {
        color: "black",
        offset: "50",
        opacity: 0,
      },
      {
        color: "black",
        offset: "90",
        opacity: 0,
      },
      {
        color: "#3260FC",
        offset: "95",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "100",
        opacity: 0.2,
      },
    ],
  },
};
export const circle5 = {
  line: "round",
  lineMode: "out-over",
  thickness: 20,
  emptyThickness: 2,
  color: {
    radial: true,
    colors: [
      {
        color: "#3260FC",
        offset: "49",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "80",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "100",
        opacity: 0,
      },
    ],
  },
};
export const circle6 = {
  line: "round",
  lineMode: "out-over",
  thickness: 20,
  emptyThickness: 2,
  color: {
    radial: true,
    colors: [
      {
        color: "#3260FC",
        offset: "89",
        opacity: 0,
      },
      {
        color: "#3260FC",
        offset: "91",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "93",
        opacity: 0,
      },
      {
        color: "#3260FC",
        offset: "95",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "97",
        opacity: 0,
      },
      {
        color: "#3260FC",
        offset: "99",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "100",
        opacity: 0,
      },
    ],
  },
};
export const circle7 = {
  line: "round",
  lineMode: "out-over",
  thickness: 20,
  emptyThickness: 1,
  color: {
    radial: true,
    colors: [
      {
        color: "#3260FC",
        offset: "88",
        opacity: 0,
      },
      {
        color: "#D4AC0D",
        offset: "90",
        opacity: 0,
      },
      {
        color: "#27AE60",
        offset: "93",
        opacity: 1,
      },
      {
        color: "#E74C3C",
        offset: "96",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "99",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "100",
        opacity: 0,
      },
    ],
  },
};
export const circle8 = {
  line: "butt",
  thickness: 100,
  emptyThickness: 1,
  color: {
    radial: true,
    colors: [
      {
        color: "#8A2BE2",
        offset: "0",
        opacity: 0.5,
      },
      {
        color: "#8A2BE2",
        offset: "98",
        opacity: 0.5,
      },
      {
        color: "#3260FC",
        offset: "99",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "100",
        opacity: 1,
      },
    ],
  },
};
export const circle9 = {
  line: "butt",
  thickness: 150,
  emptyThickness: 1,
  radial: true,
  color: {
    radial: true,
    colors: [
      {
        color: "#8A2BE2",
        offset: "0",
        opacity: 0.5,
      },
      {
        color: "#8A2BE2",
        offset: "98",
        opacity: 0.5,
      },
      {
        color: "#3260FC",
        offset: "99",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "100",
        opacity: 1,
      },
    ],
  },
};
export const circle10 = {
  dash: "strict 50 0.6",
  thickness: 10,
  emptyThickness: 10,
  radial: true,
  color: {
    radial: true,
    colors: [
      {
        color: "#3260FC",
        offset: "0",
        opacity: 0.15,
      },
      {
        color: "#3260FC",
        offset: "99",
        opacity: 0.15,
      },
      {
        color: "#3260FC",
        offset: "99",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "100",
        opacity: 1,
      },
    ],
  },
};
export const circle11 = {
  dash: "strict 50 0.8",
  thickness: 100,
  line: "butt",
  emptyThickness: 10,
  lineMode: "in-over",
  color: {
    radial: true,
    colors: [
      {
        color: "transparent",
        offset: "0",
        opacity: 0.15,
      },
      {
        color: "transparent",
        offset: "80",
        opacity: 0.15,
      },
      {
        color: "#3260FC",
        offset: "80",
        opacity: 0.15,
      },
      {
        color: "#3260FC",
        offset: "99",
        opacity: 0.15,
      },
      {
        color: "#3260FC",
        offset: "99",
        opacity: 1,
      },
      {
        color: "#3260FC",
        offset: "100",
        opacity: 1,
      },
    ],
  },
};

export default {
  setup() {
    return {
      circles: [
        circle1,
        circle2,
        circle3,
        circle4,
        circle5,
        circle6,
        circle7,
        circle8,
        circle9,
      ],
    };
  },
};
</script>

color ​

Usage: 📜 ​

Examples ​

`color`

Usage: 📜

Examples