mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

progress bar active

Browse Source
This commit is contained in:
夏奈 2015-07-30 15:07:38 +08:00
parent 3299740968
commit df16cc2118
3 changed files with 43 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/progress/demo/line-mini.md
View File

@ -15,6 +15,7 @@ var style = {
React.render( React.render(
<div style={style}> <div style={style}>
<Progress percent="30" strokeWidth="5" /> <Progress percent="30" strokeWidth="5" />
<Progress percent="50" strokeWidth="5" status="active" />
<Progress percent="70" strokeWidth="5" status="exception" /> <Progress percent="70" strokeWidth="5" status="exception" />
<Progress percent="100" strokeWidth="5" /> <Progress percent="100" strokeWidth="5" />
</div> </div>

1
components/progress/demo/line.md
View File

@ -12,6 +12,7 @@ var Progress = antd.Progress.Line;
React.render( React.render(
<div> <div>
<Progress percent="30" /> <Progress percent="30" />
<Progress percent="50" status="active" />
<Progress percent="70" status="exception" /> <Progress percent="70" status="exception" />
<Progress percent="100" /> <Progress percent="100" />
</div> </div>

47
style/components/progress.less
View File

@ -25,7 +25,7 @@
} }
&-line-bg { &-line-bg {
border-radius: 100px; border-radius: 100px;
background-color: @statusNormal; background-color: @primary-color;
} }
&-line-text { &-line-text {
position: absolute; position: absolute;
@ -40,24 +40,38 @@
font-size: 12px; font-size: 12px;
} }
} }
&-line-wrap.status-active {
.@{prefixProgressClass}-line-bg:before {
content: "";
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: #fff;
border-radius: 10px;
-webkit-animation: progress-active 2s ease infinite;
animation: progress-active 2s ease infinite;
}
}
&-line-wrap.status-exception { &-line-wrap.status-exception {
.@{prefixProgressClass}-line-bg { .@{prefixProgressClass}-line-bg {
background-color: @statusException; background-color: @error-color;
} }
.@{prefixProgressClass}-line-text { .@{prefixProgressClass}-line-text {
color: @statusException; color: @error-color;
} }
} }
&-line-wrap.status-success { &-line-wrap.status-success {
.@{prefixProgressClass}-line-bg { .@{prefixProgressClass}-line-bg {
background-color: @statusSuccess; background-color: @success-color;
} }
.@{prefixProgressClass}-line-text { .@{prefixProgressClass}-line-text {
color: @statusSuccess; color: @success-color;
} }
} }
&-circle-inner { &-circle-inner {
position: relative; position: relative;
line-height: 1; line-height: 1;
@ -87,3 +101,24 @@
} }
} }
} }
@-webkit-keyframes progress-active {
0% {
opacity: .3;
width: 0;
}
100% {
opacity: 0;
width: 100%;
}
}
@keyframes progress-active {
0% {
opacity: .3;
width: 0;
}
100% {
opacity: 0;
width: 100%;
}
}