gap

Animated

type	values	default
Number	any Number	0

Defines the gap in pixels from one circle to the previous circle. It will be applied only if data prop is used. The gap ca be specified for each circle in the data.

Usage 📜

<ve-progress :gap="10"/>

Examples

Gap:

<ve-progress 
  :gap="10"
  :data="[
    {
      color: 'blue',
      thickness: 1
    },
    {
      color: 'red',
      thickness: 3
    },
    {
      color: 'green',
      thickness: 5
    },
    {
      color: 'yellow',
      thickness: 7
    }
  ]"
  :progress="50" 
/>

NormalLoadingDeterminateNo data

The gap can also be used to create hypnotizing loading animations. Below are some examples that can be created by changing the gap property dynamically in intervalls.

Different behavior

In different browsers the behavior may vary depending on the implementation of SVG. Make sure that your animations behave consistently.

<template>
  <ve-progress v-for="(c, i) in circles" v-bind="c" :progress="50" :key="i" />
</template>
<script lang="ts">
import { Data, PluginConfig } from "../../types";

export const circle1: Partial<PluginConfig> = {
  gap: 10,
  animation: "default 1000 0",
  progress: 100,
  data: [
    {
      thickness: 0,
    },
    {
      thickness: 1,
    },
    {
      thickness: 1,
    },
    {
      thickness: 1,
    },
    {
      thickness: 1,
    },
    {
      thickness: 1,
    },
    {
      thickness: 1,
    },
  ],
};
export const circle2: Partial<PluginConfig> = {
  progress: 100,
  data: [
    {
      thickness: 1,
      gap: 20,
    },
    {
      thickness: 4,
    },
    {
      thickness: 4,
    },
    {
      thickness: 4,
    },
    {
      thickness: 4,
    },
    {
      thickness: 4,
    },
    {
      thickness: 4,
    },
  ],
};

export const animateGap = (initialGap: number) => {
  if (initialGap === 0) {
    return 100;
  } else {
    return 0;
  }
};
export const animateData = (data: Data) => {
  if (data[1].gap === 20) {
    data[1].gap = 100;
  } else {
    data[1].gap = 20;
  }
};

export default {
  setup() {
    return {
      circles: [circle1, circle2],
    };
  },
  onMounted() {
    setInterval(() => {
      circle1.gap = animateGap(0);
      animateData(circle2.data);
    }, 1000);
  },
};
</script>