drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Progress style

Browse source
This commit is contained in:
梁灏 2018-06-27 17:49:00 +08:00
parent 6e1f8f4063
commit 724a607712
2 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
examples/routers/progress.vue
View file

@ -5,6 +5,12 @@
<Progress vertical :percent="65" status="wrong"></Progress> <Progress vertical :percent="65" status="wrong"></Progress>
<Progress vertical :percent="100"></Progress> <Progress vertical :percent="100"></Progress>
<Progress vertical :percent="25" hide-info></Progress> <Progress vertical :percent="25" hide-info></Progress>
<Progress :percent="25"></Progress>
<Progress :percent="45" status="active"></Progress>
<Progress :percent="65" status="wrong"></Progress>
<Progress :percent="100"></Progress>
<Progress :percent="25" hide-info></Progress>
</div> </div>
</template> </template>
<script> <script>

18
src/styles/components/progress.less
View file

@ -89,6 +89,13 @@
} }
} }
&-vertical&-active{
.@{progress-prefix-cls}-bg:before {
top: auto;
animation: ivu-progress-active-vertical 2s @ease-in-out infinite;
}
}
&-wrong { &-wrong {
.@{progress-prefix-cls}-bg { .@{progress-prefix-cls}-bg {
background-color: @error-color; background-color: @error-color;
@ -118,3 +125,14 @@
width: 100%; width: 100%;
} }
} }
@keyframes ivu-progress-active-vertical {
0% {
opacity: .3;
height: 0;
}
100% {
opacity: 0;
height: 100%;
}
}