/* Table of Contents ================================================== #Progress */ /* #Progress ================================================== */ @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-moz-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-ms-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-o-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress { background-color: rgba(236,238,241,1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 1px solid rgba(217,222,225,1); height: 25px; overflow: hidden; } .progress .bar { background-color: rgba(64,80,90,1); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(64,80,90,0.05)), to(rgba(64,80,90,1))); background-image: -webkit-linear-gradient(top, rgba(64,80,90,0.05), rgba(64,80,90,1)); background-image: -moz-linear-gradient(top, rgba(64,80,90,0.05), rgba(64,80,90,1)); background-image: -ms-linear-gradient(top, rgba(64,80,90,0.05), rgba(64,80,90,1)); background-image: -o-linear-gradient(top, rgba(64,80,90,0.05), rgba(64,80,90,1)); background-image: linear-gradient(to bottom, rgba(64,80,90,0.05), rgba(64,80,90,1)); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e9ec', endColorstr='#d9dee1', GradientType=0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: rgba(255,255,255,1); float: left; font-size: 12px; height: 100%; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); width: 0; } .progress-striped .bar { background-color: rgba(64,80,90,0.50); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(64,80,90,0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(64,80,90,0.15)), color-stop(0.75, rgba(64,80,90,0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(64,80,90,0.15) 25%, transparent 25%, transparent 50%, rgba(64,80,90,0.15) 50%, rgba(64,80,90,0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(64,80,90,0.15) 25%, transparent 25%, transparent 50%, rgba(64,80,90,0.15) 50%, rgba(64,80,90,0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(45deg, rgba(64,80,90,0.15) 25%, transparent 25%, transparent 50%, rgba(64,80,90,0.15) 50%, rgba(64,80,90,0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(64,80,90,0.15) 25%, transparent 25%, transparent 50%, rgba(64,80,90,0.15) 50%, rgba(64,80,90,0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(64,80,90,0.15) 25%, transparent 25%, transparent 50%, rgba(64,80,90,0.15) 50%, rgba(64,80,90,0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; -o-background-size: 40px 40px; background-size: 40px 40px; } .progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; }