|
|
.ui.progress { border: 1px solid rgba(0,0,0,.1); width: 100%; height: 35px; background-color: #FAFAFA; padding: 5px; border-radius: .3125em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.ui.progress .bar { display: inline-block; height: 100%; background-color: #CCC; border-radius: 3px; -webkit-transition: width 1s ease-in-out,background-color 1s ease-out; transition: width 1s ease-in-out,background-color 1s ease-out; }
.ui.successful.progress .bar { background-color: #73E064!important; }
.ui.successful.progress .bar, .ui.successful.progress .bar::after { -webkit-animation: none!important; animation: none!important; }
.ui.failed.progress .bar { background-color: #DF9BA4!important; }
.ui.failed.progress .bar, .ui.failed.progress .bar::after { -webkit-animation: none!important; animation: none!important; }
.ui.active.progress .bar { position: relative; }
.ui.active.progress .bar::after { content: ''; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #FFF; border-radius: 3px; -webkit-animation: progress-active 2s ease-out infinite; animation: progress-active 2s ease-out infinite; }
@-webkit-keyframes progress-active { 0% { opacity: 0; width: 0; }
50% { opacity: .3; }
100% { opacity: 0; width: 95%; } }
@keyframes progress-active { 0% { opacity: 0; width: 0; }
50% { opacity: .3; }
100% { opacity: 0; width: 100%; } }
.ui.disabled.progress { opacity: .35; }
.ui.disabled.progress .bar, .ui.disabled.progress .bar::after { -webkit-animation: none!important; animation: none!important; }
.ui.progress.attached { position: relative; border: 0; }
.ui.progress.attached, .ui.progress.attached .bar { display: block; height: 3px; padding: 0; overflow: hidden; border-radius: 0 0 .3125em .3125em; }
.ui.progress.attached .bar { border-radius: 0; }
.ui.progress.top.attached, .ui.progress.top.attached .bar { top: -2px; border-radius: .3125em .3125em 0 0; }
.ui.progress.top.attached .bar { border-radius: 0; }
.ui.blue.progress .bar { background-color: #6ECFF5; }
.ui.black.progress .bar { background-color: #5C6166; }
.ui.green.progress .bar { background-color: #A1CF64; }
.ui.red.progress .bar { background-color: #EF4D6D; }
.ui.purple.progress .bar { background-color: #564F8A; }
.ui.teal.progress .bar { background-color: #00B5AD; }
.ui.progress.striped .bar { -webkit-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear,left top,right bottom,color-stop(0.25,rgba(255,255,255,.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.15)),color-stop(0.75,rgba(255,255,255,.15)),color-stop(0.75,transparent),to(transparent)); background-image: -webkit-linear-gradient(135deg,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); background-image: -webkit-linear-gradient(315deg, 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); background-image: linear-gradient(135deg,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); }
.ui.progress.active.striped .bar:after { -webkit-animation: none; -ms-animation: none; animation: none; }
.ui.progress.active.striped .bar { -webkit-animation: progress-striped 3s linear infinite; animation: progress-striped 3s linear infinite; }
@-webkit-keyframes progress-striped { 0% { background-position: 0 0; }
100% { background-position: 60px 0; } }
@keyframes progress-striped { 0% { background-position: 0 0; }
100% { background-position: 60px 0; } }
.ui.small.progress .bar { height: 14px; }
|