RetroSearch Browse

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

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

Website Navigation

Guide

thickness | vue-ellipse-progress

thickness Animated type values default Number|String >=0 as Number or percent value as String "5%"

Defines the progress line thickness, which can be a Number >=0 or a percentage value as a String. When specified as a percentage, the thickness is calculated relative to the size.

Usage: 📜 vue

<ve-progress :thickness="10" />
<ve-progress thickness="10%" />

Examples vue

<template>
  <ve-progress :thickness="1" :progress="50" :size="150" />
  <ve-progress :thickness="5" :progress="50" :size="150" />
  <ve-progress :thickness="15" :progress="50" :size="150" />
  <ve-progress :thickness="20" :progress="50" :size="150" />
</template>

When defined as a string, the thickness can be specified as a percentage, allowing it to scale relative to the size:

vue

<template>
  <ve-progress thickness="10%" :size="100" :progress="50" />
  <ve-progress thickness="10%" :size="200" :progress="50" />
  <ve-progress thickness="10%" :size="300" :progress="50" />
</template>

In the following example you can see how the thickness of the progress line affects other parts of the circle. Move the slider to see the effect:

js

<ve-progress :thickness="50" dot="20 white" :progress="50" />

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