Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://setaman.github.io/vue-ellipse-progress-docs/guide/options/gap.html below:

Website Navigation

• Guide

gap | vue-ellipse-progress

<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>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4