ios7 Progress Bar

index.html

<div class="container">
  <h1 class="text-center">iOS 7 Progress Bar</h1>
  <div class="progress">
    <div class="progress-bar">
      <div class="progress-shadow"></div>
    </div>
  </div>
</div>

ios7 Progress Bar.markdown

ios7 Progress Bar

Forked from CCG's Pen ios7 Progress Bar.

A Pen by Kai Smith on CodePen.

License.

style.css

/* www.jiawin.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%;
	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%;
  }
}