element-gui
Version:
A Component Library for Vue.js.
1 lines • 2.83 kB
CSS
.el-progress{position:relative;line-height:1}.el-progress--line{display:table;width:100%}.el-progress__text{font-size:14px;color:#333;display:table-cell;vertical-align:middle;padding-left:10px;line-height:1;white-space:nowrap}.el-progress__text i{vertical-align:middle;display:block}.el-progress--circle,.el-progress--dashboard{display:inline-block}.el-progress--circle .el-progress__text,.el-progress--dashboard .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;padding:0;transform:translate(0,-50%)}.el-progress--circle .el-progress__text i,.el-progress--dashboard .el-progress__text i{vertical-align:middle;display:inline-block}.el-progress--without-text .el-progress__text{display:none}.el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.el-progress.is-success .el-progress-bar__inner{background-color:#57B21C}.el-progress.is-success .el-progress__text{color:#57B21C}.el-progress.is-warning .el-progress-bar__inner{background-color:#FC9306}.el-progress.is-warning .el-progress__text{color:#FC9306}.el-progress.is-exception .el-progress-bar__inner{background-color:#E82F2F}.el-progress.is-exception .el-progress__text{color:#E82F2F}.el-progress-bar{display:table-cell;vertical-align:middle;width:100%;box-sizing:border-box}.el-progress-bar__outer{height:10px;border-radius:100px;background-color:#d2d2d2;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;background-color:#1890ff;text-align:right;border-radius:100px;line-height:1;white-space:nowrap;transition:width .6s ease}.el-progress-bar__inner::after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-progress-bar__inner.active::before{content:"";opacity:0;position:absolute;left:0;bottom:0;height:100%;background:#fff;border-radius:100px;animation:progress-active 2s ease-in-out infinite}.el-progress-bar__inner.is-indeterminate{transform:translateZ(0);animation:indeterminate 3s infinite}.el-progress-bar__inner.is-striped{background-image:linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);background-size:1.25em 1.25em}.el-progress-bar__inner.is-striped.el-progress-bar__inner--striped-flow{animation:striped-flow 3s linear infinite}.el-progress-bar__innerText{display:inline-block;vertical-align:middle;color:#fff;font-size:12px;margin:0 5px}@keyframes progress{0%{background-position:0 0}100%{background-position:32px 0}}@keyframes progress-active{0%{opacity:.4;width:0}to{opacity:0;width:100%}}@keyframes indeterminate{0%{left:-100%}100%{left:100%}}@keyframes striped-flow{0%{background-position:-100%}100%{background-position:100%}}