Skip to content

Instantly share code, notes, and snippets.

@jarques
Created July 3, 2013 13:26
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jarques/5917827 to your computer and use it in GitHub Desktop.
Save jarques/5917827 to your computer and use it in GitHub Desktop.
.progress {
width: 400px;
}
.bar {
background: #e5e9eb;
height: 6px;
position: relative;
}
.bar .percentage {
background: -webkit-gradient(linear, left top, right top,
color-stop(0%,#01dcd7),
color-stop(23%,#086df2),
color-stop(50%,#11a1e3),
color-stop(78%,#9350ad),
color-stop(100%,#fb4a71));
background-size: 400px 5px;
height: 4px;
position: relative;
width: 0;
transition: width 3s cubic-bezier(1,0,.62,.86);
}
.bar .percentage .shadow {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
left: 35px;
-webkit-transform: skew(45deg);
-webkit-backface-visibility: hidden;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(252,252,252,0)));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment