Colored Progress Bar

HTML
<div class="container"> <div class="building"> <span><span></span></span> </div> </div>
SCSS
$building: #3498db; .building { height: 40px; position: relative; background: #fff; padding: 6px; border-radius: 6px; box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.2); > span { display: block; height: 100%; background-color: $building; position: relative; overflow: hidden; } > span:after, .animate > span > span { animation: move 2s linear infinite; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); z-index: 1; background-size: 50px 50px; animation: move 2s linear infinite; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; } } .animate > span:after { display: none; } @keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } html, body { height: 100%; width: 100%; } body { background: linear-gradient(to left, #457fca , #5691c8); text-align: center; } .container { width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
JAVASCRIPT
Expand for more options Login