iOS Progress Bar

HTML
<div class="container"> <h1 class="text-center">iOS Progress Bar</h1> <div class="progress"> <div class="progress-bar"> <div class="progress-shadow"></div> </div> </div> </div>
CSS
html, body { height: 100%; } body { background-color: #f5f7f9; color: #6c6c6c; font: 300 1em/1.5em "Helvetica Neue", sans-serif; margin: 0; position: relative; } h1 { font-size: 2.25em; font-weight: 100; line-height: 1.2em; margin: 0 0 1.5em; } /* HELPERS */ .text-center { text-align: center; } /* GRID */ .container { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } /* PROGRESS */ .progress { background-color: #e5e9eb; height: 0.25em; position: relative; width: 24em; } .progress-bar { animation-duration: 3s; animation-name: width; background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); animation-iteration-count:infinite; background-size: 24em 0.25em; height: 100%; position: relative; } .progress-shadow { background-image: linear-gradient(to bottom, #eaecee, transparent); height: 4em; position: absolute; top: 100%; transform: skew(45deg); transform-origin: 0 0; width: 100%; } /* ANIMATIONS */ @keyframes width { 0%, 100% { transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); } 0% { width: 0; } 100% { width: 100%; } }
JAVASCRIPT
Expand for more options Login