| 1 | [role=progressbar]{background:linear-gradient(90deg,rgba(0,0,0,.1),transparent 20%,transparent 80%,rgba(0,0,0,.1)),linear-gradient(180deg,hsla(0,0%,100%,.6) 25%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.05) 90%,hsla(0,0%,100%,.2) 95%),#ddd;border:1px solid #8e8f8f;border-radius:3px;box-shadow:inset 0 0 2px #fff,0 0 2px #aaa;height:15px;margin:2px 0;overflow:hidden}[role=progressbar]>div{background-color:#0bd82c;background-image:linear-gradient(90deg,rgba(0,0,0,.2),transparent 20%,transparent 80%,rgba(0,0,0,.2)),linear-gradient(180deg,hsla(0,0%,100%,.6) 30%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 90%,hsla(0,0%,100%,.2) 95%);box-shadow:inset 0 0 1px #fff;height:100%;overflow:hidden}[role=progressbar].paused>div{background-color:#e6df1b}[role=progressbar].error>div{background-color:#ef0000}[role=progressbar].animate>div:before,[role=progressbar].marquee:before{animation:progressbar 3s linear infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.5),transparent 40%);content:"";display:block;height:100%}[role=progressbar].marquee:before{background:linear-gradient(90deg,transparent,#0bd82c,transparent 35%);opacity:.5}@keyframes progressbar{0%{transform:translateX(-40%)}60%{transform:translateX(100%)}to{transform:translateX(100%)}}
|