`colorFill`

Animated

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

Defines the fill color of the progress 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 as 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)

WARNING

Progress circle overlaps the empty circle! In the examples, you will see the fill color partially covering the empty line.

TIP

According to default SVG behavior, the fill area of the circle is aligned at the baseline of the progress line. With the linePosition property this behavior can be adjusted.

Usage: 📜

vue


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

Examples

vue

<template>
  <ve-progress color-fill="DimGray" :progress="50" :size="150" />
  <ve-progress color-fill="#1ABC9C" :progress="50" :size="150" />
  <ve-progress color-fill="rgba(255, 87, 51, 0.7)" :progress="50" :size="150" />
  <ve-progress :color-fill="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

vue

<template>
  <ve-progress :color-fill="gradient1" :progress="50" :size="150" />
  <ve-progress :color-fill="gradient2" :progress="50" :size="150" />
  <ve-progress
    :color-fill="gradient3"
    line-mode="in 10"
    :progress="50"
    :size="150"
  />
  <ve-progress :color-fill="gradient4" :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: Gradient = {
  colors: [
    {
      color: "#3498DB",
      offset: "0",
    },
    {
      color: "#8A2BE2",
      offset: "100",
    },
  ],
};
export const gradient2: Gradient = {
  colors: [
    {
      color: "#ffffff",
      offset: "0",
    },
    {
      color: "#f8f9fa",
      offset: "70",
    },
    {
      color: "#edf1f5",
      offset: "100",
    },
    {
      color: "Crimson",
      offset: "75",
    },
    {
      color: "#8A2BE2",
      offset: "100",
    },
  ],
};
export const gradient3: Gradient = {
  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: Gradient = {
  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" :key="i" :progress="50" />
</template>
<script lang="ts">
export const circle1 = {
  colorFill: {
    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 = {
  color: "#7579ff",
  emptyColor: "transparent",
  thickness: "5",
  emptyThickness: "3",
  lineMode: "out 5",
  colorFill: {
    radial: true,
    colors: [
      {
        color: "#754fc1",
        offset: "0",
        opacity: "0.3",
      },
      {
        color: "#366bfc",
        offset: "100",
        opacity: "0.3",
      },
    ],
  },
};
export const circle3 = {
  thickness: 2,
  emptyColor: "transparent",
  colorFill: {
    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 circle4 = {
  line: "butt",
  emptyColor: "#324c7e",
  thickness: 46,
  emptyThickness: 8,
  size: 180,
  dash: "strict 60 0.8",
  lineMode: "in",
  color: {
    radial: true,
    colors: [
      {
        color: "#3260FC",
        offset: "50",
        opacity: "0.0",
      },
      {
        color: "#3260FC",
        offset: "70",
        opacity: "0.0",
      },
      {
        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",
      },
    ],
  },
  colorFill: {
    radial: true,
    colors: [
      {
        color: "#3260FC",
        offset: "50",
        opacity: "0.2",
      },
      {
        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: "0.1",
      },
      {
        color: "transparent",
        offset: "90",
        opacity: "0.1",
      },
      {
        color: "transparent",
        offset: "95",
        opacity: "0.1",
      },
      {
        color: "transparent",
        offset: "95",
        opacity: "0.1",
      },
    ],
  },
};
export const circle5 = {
  emptyThickness: 2,
  colorFill: {
    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 circle6 = {
  thickness: 2,
  emptyThickness: 1,
  color: "#7579ff",
  emptyColor: "#324c7e",
  dash: "strict 60 0.8",
  lineMode: "in-over",
  colorFill: {
    radial: true,
    colors: [
      {
        color: "#3260FC",
        offset: "50",
        opacity: "0.2",
      },
      {
        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: "0.1",
      },
      {
        color: "transparent",
        offset: "90",
        opacity: "0.1",
      },
      {
        color: "transparent",
        offset: "95",
        opacity: "0.1",
      },
      {
        color: "transparent",
        offset: "95",
        opacity: "0.1",
      },
    ],
  },
};

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

colorFill ​

Usage: 📜 ​

Examples ​

`colorFill`

Usage: 📜

Examples