Pure CSS3 Implementation Apple iOS 7 style progress bar

Remember the "disruptive" flat design of iOS 7? We marvel at the various flat UI interfaces in which the progress bar is even more impressive. Today we will share a small tutorial on iOS7 progress bar made with CSS3, which is a very good UI interaction design. Let's take a look at the demo and how it works!

HTML Structure Code

First design the basic structure of HTML, probably as follows:

<div class= "Container" >  
　　
CSS3 Style Code
Once the structure is written, we will then write CSS styles based on the UI design style of iOS. Careful study of the interface elements, we can use the CSS3 gradient properties linear-gradient to complete the color of the horizontal bar, in addition, we can notice the horizontal bar below a tilted projection, this detail is very good, so that the overall look more stereoscopic, more aesthetic! But this projection implementation is very special, we do not use box-shadow to make, we still use the gradient property to complete, and then through transform to modify its angle, so as to achieve the effect we need. OK, all the CSS code below, we can refer to.
<style>/* www.datouwang.com *//* VARIABLES *//* COLORS *//* BASE */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%;p osition: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-image:linear-gradient (to right, #4cd964, # 5AC8FA, #007aff, #34aadc, #5856d6, #ff2d55); Background-size:24em 0.25em;height:100%;p osition: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%; }}</style>
　　
Add CSS3 no prefix script prefixfree.js
After this, the progress bar has been basically finished, looking at the interface is not very familiar with the feeling. But if you are careful you will find that the CSS3 code above does not add a browser-compatible prefix. This will result in no animations under different browsers. At this point we can use the prefixfree.js script, which automatically complements the required prefix, allowing the various browsers to support the CSS3 property. (Of course, if you manually add all the CSS3 prefixes, then you don't need to introduce this plugin)
<script src= "Http://www.datouwang.com/uploads/demo/jiaoben/201501/jiaoben467/js/prefixfree.min.js" ></ Script>
　　
Pure CSS3 Implementation Apple iOS 7 style progress bar