* / . ui . progress { position : relative ; display : block ; max-width : 100 % ; border : none ; margin : 1 em 0 2.5 em ; -webkit- box-shadow : none ; box-shadow : none ; background : rgba ( 0 , 0 , 0 , .1 ) ; padding : 0 ; border-radius : .28571429 rem } . ui . progress : first-child { margin : 0 0 2.5 em } . ui . progress : last-child { margin : 0 0 1.5 em } . ui . progress . bar { display : block ; line-height : 1 ; position : relative ; width : 0 % ; min-width : 2 em ; background : #888 ; border-radius : .28571429 rem ; -webkit- transition : width .1 s ease , background-color .1 s ease ; transition : width .1 s ease , background-color .1 s ease } . ui . progress . bar > . progress { white-space : nowrap ; position : absolute ; width : auto ; font-size : .92857143 em ; top : 50 % ; right : .5 em ; left : auto ; bottom : auto ; color : rgba ( 255 , 255 , 255 , .7 ) ; text-shadow : none ; margin-top : -.5 em ; font-weight : 700 ; text-align : left } . ui . progress > . label { position : absolute ; width : 100 % ; font-size : 1 em ; top : 100 % ; right : auto ; left : 0 ; bottom : auto ; color : rgba ( 0 , 0 , 0 , .87 ) ; font-weight : 700 ; text-shadow : none ; margin-top : .2 em ; text-align : center ; -webkit- transition : color .4 s ease ; transition : color .4 s ease } . ui . indicating . progress [ data-percent ^ = "1" ] . bar , . ui . indicating . progress [ data-percent ^ = "2" ] . bar { background-color : #d95c5c } . ui . indicating . progress [ data-percent ^ = "3" ] . bar { background-color : #efbc72 } . ui . indicating . progress [ data-percent ^ = "4" ] . bar , . ui . indicating . progress [ data-percent ^ = "5" ] . bar { background-color : #e6bb48 } . ui . indicating . progress [ data-percent ^ = "6" ] . bar { background-color : #ddc928 } . ui . indicating . progress [ data-percent ^ = "7" ] . bar , . ui . indicating . progress [ data-percent ^ = "8" ] . bar { background-color : #b4d95c } . ui . indicating . progress [ data-percent ^ = "100" ] . bar , . ui . indicating . progress [ data-percent ^ = "9" ] . bar { background-color : #66da81 } . ui . indicating . progress [ data-percent ^ = "1" ] . label , . ui . indicating . progress [ data-percent ^ = "2" ] . label { color : rgba ( 0 , 0 , 0 , .87 ) } . ui . indicating . progress [ data-percent ^ = "3" ] . label { color : rgba ( 0 , 0 , 0 , .87 ) } . ui . indicating . progress [ data-percent ^ = "4" ] . label , . ui . indicating . progress [ data-percent ^ = "5" ] . label { color : rgba ( 0 , 0 , 0 , .87 ) } . ui . indicating . progress [ data-percent ^ = "6" ] . label { color : rgba ( 0 , 0 , 0 , .87 ) } . ui . indicating . progress [ data-percent ^ = "7" ] . label , . ui . indicating . progress [ data-percent ^ = "8" ] . label { color : rgba ( 0 , 0 , 0 , .87 ) } . ui . indicating . progress [ data-percent ^ = "100" ] . label , . ui . indicating . progress [ data-percent ^ = "9" ] . label { color : rgba ( 0 , 0 , 0 , .87 ) } . ui . indicating . progress [ data-percent = "1" ] . bar , . ui . indicating . progress [ data-percent = "2" ] . bar , . ui . indicating . progress [ data-percent = "3" ] . bar , . ui . indicating . progress [ data-percent = "4" ] . bar , . ui . indicating . progress [ data-percent = "5" ] . bar , . ui . indicating . progress [ data-percent = "6" ] . bar , . ui . indicating . progress [ data-percent = "7" ] . bar , . ui . indicating . progress [ data-percent = "8" ] . bar , . ui . indicating . progress [ data-percent = "9" ] . bar { background-color : #d95c5c } . ui . indicating . progress [ data-percent = "1" ] . label , . ui . indicating . progress [ data-percent = "2" ] . label , . ui . indicating . progress [ data-percent = "3" ] . label , . ui . indicating . progress [ data-percent = "4" ] . label , . ui . indicating . progress [ data-percent = "5" ] . label , . ui . indicating . progress [ data-percent = "6" ] . label , . ui . indicating . progress [ data-percent = "7" ] . label , . ui . indicating . progress [ data-percent = "8" ] . label , . ui . indicating . progress [ data-percent = "9" ] . label { color : rgba ( 0 , 0 , 0 , .87 ) } . ui . indicating . progress . success . label { color : #1a531b } . ui . progress . success . bar { background-color : #21ba45 !important } . ui . progress . success . bar , . ui . progress . success . bar :: after { -webkit- animation : none !important ; animation : none !important } . ui . progress . success > . label { color : #1a531b } . ui . progress . warning . bar { background-color : #f2c037 !important } . ui . progress . warning . bar , . ui . progress . warning . bar :: after { -webkit- animation : none !important ; animation : none !important } . ui . progress . warning > . label { color : #794b02 } . ui . progress . error . bar { background-color : #db2828 !important } . ui . progress . error . bar , . ui . progress . error . bar :: after { -webkit- animation : none !important ; animation : none !important } . ui . progress . error > . label { color : #912d2b } . ui . active . progress . bar { position : relative ; min-width : 2 em } . ui . active . progress . bar :: after { content : '' ; opacity : 0 ; position : absolute ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; background : #fff ; border-radius : .28571429 rem ; - w e b k i t