Skip to content

Commit 3a3802c

Browse files
savoygusavoygu
committed
Add progress striped animation support
1 parent a50982c commit 3a3802c

File tree

7 files changed

+111
-7
lines changed

7 files changed

+111
-7
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ npm install vue-multiple-progress -S
1313
```bash
1414
import Vue from 'vue'
1515
import Progress from 'vue-multiple-progress'
16-
Vue.component('VmProgress', Progress)
16+
Vue.use('VmProgress', Progress)
1717
```
1818

1919
For more information, please refer to [Progress](https://vue-multiple.github.io/progress) in our documentation.

‎example/src/App.vue

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,24 @@
4242
<code>Progress</code> 组件可通过 <code>stroke-width</code> 属性更改进度条的高度，并可通过 <code>text-inside</code> 属性来将进度条描述置于进度条内部。
4343
</template>
4444
</demonstration>
45+
<demonstration
46+
title="线形进度条 — 渐变条纹"
47+
anchor="xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"
48+
:highlight="sourcecodeD">
49+
<template slot="source">
50+
<vm-button class="btn-striped" type="info" @click="striped=!striped">切换条纹</vm-button>
51+
<vm-progress :percentage="0" :text-inside="true" :stroke-width="18" :striped="striped"></vm-progress>
52+
<vm-progress :percentage="70" :text-inside="true" :stroke-width="18" :striped="striped"></vm-progress>
53+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" strokeColor="purple" :striped="striped"></vm-progress>
54+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" status="exception" :striped="striped"></vm-progress>
55+
<vm-progress :percentage="50" :text-inside="true" :stroke-width="18" status="info" :striped="striped"></vm-progress>
56+
<vm-progress :percentage="80" :text-inside="true" :stroke-width="18" status="warning" :striped="striped"></vm-progress>
57+
<vm-progress :percentage="100" :text-inside="true" :stroke-width="18" status="success" :striped="striped"></vm-progress>
58+
</template>
59+
<template slot="explanation">
60+
<code>Progress</code> 组件设置 <code>striped</code> 属性即可，表示进度条是否添加条纹渐变动画，还可以通过 `linear-class-name` 定义自己的进度动画。
61+
</template>
62+
</demonstration>
4563
<demonstration
4664
title="环形进度条"
4765
anchor="huan-xing-jin-du-tiao"
@@ -89,6 +107,20 @@
89107
</tr>
90108
</thead>
91109
<tbody>
110+
<tr>
111+
<td>striped <i class="vd-demo__new">（新增）</i></td>
112+
<td>是否为进度添加条纹渐变动画</td>
113+
<td>boolean</td>
114+
<td>—</td>
115+
<td>false</td>
116+
</tr>
117+
<tr>
118+
<td>linear-class-name <i class="vd-demo__new">（新增）</i></td>
119+
<td>进度渐变类名</td>
120+
<td>string</td>
121+
<td>—</td>
122+
<td>—</td>
123+
</tr>
92124
<tr>
93125
<td><strong>percentage</strong></td>
94126
<td><strong>百分比（必填）</strong></td>
@@ -197,15 +229,17 @@
197229
</template>
198230

199231
<script>
200-
import { sourcecodeA, sourcecodeB, sourcecodeC } from './template'
232+
import { sourcecodeA, sourcecodeB, sourcecodeC, sourcecodeD } from './template'
201233
202234
export default {
203235
data () {
204236
return {
205237
sourcecodeA,
206238
sourcecodeB,
207239
sourcecodeC,
208-
percentage: 70
240+
sourcecodeD,
241+
percentage: 70,
242+
striped: true
209243
}
210244
},
211245
methods: {
@@ -231,4 +265,7 @@
231265
margin-bottom: 15px;
232266
}
233267
}
268+
.btn-striped {
269+
margin-bottom: 20px;
270+
}
234271
</style>

‎example/src/template.js

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,23 @@ export const sourcecodeC = `<template>
5353
}
5454
}
5555
}
56-
</script>`
56+
</script>`
57+
58+
export const sourcecodeD = `<vm-button class="btn-striped" type="info" @click="striped=!striped">切换条纹</vm-button>
59+
<vm-progress :percentage="0" :text-inside="true" :stroke-width="18" :striped="striped"></vm-progress>
60+
<vm-progress :percentage="70" :text-inside="true" :stroke-width="18" :striped="striped"></vm-progress>
61+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" strokeColor="purple" :striped="striped"></vm-progress>
62+
<vm-progress :percentage="30" :text-inside="true" :stroke-width="18" status="exception" :striped="striped"></vm-progress>
63+
<vm-progress :percentage="50" :text-inside="true" :stroke-width="18" status="info" :striped="striped"></vm-progress>
64+
<vm-progress :percentage="80" :text-inside="true" :stroke-width="18" status="warning" :striped="striped"></vm-progress>
65+
<vm-progress :percentage="100" :text-inside="true" :stroke-width="18" status="success" :striped="striped"></vm-progress>
66+
67+
<script>
68+
export default {
69+
data () {
70+
return {
71+
striped: true
72+
}
73+
}
74+
}
75+
</script>`

‎lib/progress.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎release.sh

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
git checkout master
2+
git merge dev
3+
4+
#!/usr/bin/env sh
5+
#如果指令传回值不等于0，则立即退出shell。
6+
set -e
7+
echo "Enter release version: "
8+
read VERSION
9+
10+
# 打印 "Release $VERSION - are you sure? (y/n)"，只读取一个字符，并且允许输入反斜杠
11+
read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
12+
echo # (optional) move to a new line
13+
if [[ $REPLY =~ ^[Yy]$ ]]
14+
then
15+
echo "Releasing $VERSION ..."
16+
17+
#build
18+
VERSION=$VERSION npm run build
19+
20+
#commit
21+
git add -A
22+
git commit -m "[build] $VERSION"
23+
npm version $VERSION --message "[release] $VERSION"
24+
25+
#publish
26+
git push origin refs/tags/v$VERSION
27+
git push
28+
npm publish
29+
fi

‎src/components/progress.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
]">
1111
<div class="vm-progress-bar" v-if="type === 'line'">
1212
<div class="vm-progress-bar__outer" :style="{ height: strokeWidth + 'px', backgroundColor: trackColor }">
13-
<div class="vm-progress-bar__inner" :style="barStyle">
13+
<div class="vm-progress-bar__inner" :class="[{'vm-progress-bar__striped': striped}, linearClassName]" :style="barStyle">
1414
<div class="vm-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
1515
</div>
1616
</div>
@@ -97,7 +97,12 @@
9797
reverse: {
9898
type: Boolean,
9999
default: false
100-
}
100+
},
101+
striped: {
102+
type: Boolean,
103+
default: false
104+
},
105+
linearClassName: String
101106
},
102107
103108
data () {

‎src/styles/less/progress.less

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,5 +118,19 @@
118118
font-size: 12px;
119119
margin: 0 5px;
120120
}
121+
&__striped {
122+
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
123+
background-size: 40px 40px;
124+
animation: progress-bar-stripes 2s linear infinite
125+
}
126+
}
127+
}
128+
@keyframes progress-bar-stripes {
129+
from {
130+
background-position: 40px 0
131+
}
132+
133+
to {
134+
background-position: 0 0
121135
}
122136
}

0 commit comments

Comments
 (0)