vue線性漸變
a vue plugin, linear progress bar.
vue外掛程式，線性進度條。
view demo
檢視演示
view github
檢視github
npm install -s k-progress
# or
yarn add k-progress
// main.js
import kprogress from 'k-progress';
vue.component('k-progress', kprogress);
type
default
optional
explain
percent
number
00-100
percent (required)
line-height
number
6progress bar height
type
string
lineline/lumpprogress bar type
status
string
success/warning/errorprogress bar status
color
string / array / function
progress bar color; when usingarray, the limit is 6; when usingfunction, the argument ispercent
color-flow
boolean
false
whether to enable color flow
flow-second
number
51-6
the time required for the flow, that is, the smaller the time, the faster the speed
bg-color
string
#ebeef5color code
progress bar background color
border
boolean
true
whether arc
show-text
boolean
true
whether to show progress bar text
format
function
custom text display, parameter ispercent
cut-width
number
1lumpwidth
cut-color
string
#ebeef5color code
lumpcolor
active
boolean
false
whether to enable dynamic effects
active-color
string
dynamic effect color
屬性 型別 預設
可選的
說明 百分
數 0
0-100
百分比(必填)
行高 數
6 進度條高度
型別 串
lineline/lump進度條型別
狀態 串
success/warning/error進度欄狀態
顏色 字串/陣列/函式
進度條顏色； 使用array，限制為6； 使用function，引數為percent
色流 布林型
false
是否啟用色彩流
流量秒
數 5
1-6
流程所需的時間，即時間越短，速度越快
背景色
串#ebeef5色標
進度欄背景色
邊境 布林型
true
是否圓弧
顯示文字
布林型
true
是否顯示進度條文字
格式 功能
自定義文字顯示，引數為percent
裁切寬度
數 1個
lump寬
切色 串
#ebeef5色標
lump色
活性 布林型
false
是否啟用動態效果
活性色
串 動態效果色
翻譯自:vue線性漸變
vue環形進度條
util檔案circularprogressbar.js canvas物件item,進度條pro,進度條起始顏色colorstart,進度條結束顏色colorend export const start item,pro,colorstart,colorend class circularprogr...
漸變進度條
用建立的方式來寫漸變的進度條 public class myprogressview extends viewgroup public myprogressview context context,attributeset attrs override protected void onlayout...
半圓形進度條 vue
circle progress canvas width 150 height 150 canvas div template export default mounted methods smallcircle2 cx,cy,r 畫圓 circle cx,cy,r 畫弧線 sector cx,cy...