/* Table of Contents ================================================== # Progress */ /* # Progress ================================================== */ @-webkit-keyframes progressBarStripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @keyframes progressBarStripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress { background: rgba(245,248,250,1); border-radius: 500px; height: 25px; overflow: hidden; } .progress .bar { background: rgba(15,135,226,1); box-sizing: border-box; color: rgba(255,255,255,1); float: left; font-size: 13px; height: 100%; -webkit-transition: width 0.6s ease; transition: width 0.6s ease; text-align: center; width: 0; } .progress .bar-striped { background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; } .progress .bar-striped.active { -webkit-animation: progressBarStripes 2s linear infinite; animation: progressBarStripes 2s linear infinite; } .progress-mini { height: 8px; }