<section class="container text-center">
<h1>UX Progress Bar</h1>
<div class="progress-bar">
<div class="progress">
<div class="progress-shadow"></div>
</div>
</div>
</section>
body
background-color #f5f7f9
color #bcbcbc
font-family 'Open Sans', sans-serif
h1
font-size 65px
font-weight lighter
color #666
margin 1em 0 0.5em
/* Helpers */
.text-center
text-align center
.container
margin 0 auto
width 70%
/* Progress Bar Variables */
$progress-height = 10px
$progress-width = 500px
$progress-disabled-color = #e5e9eb
$progress-shadow-color = #eaecee
/* Progress Bar CSS*/
.progress-bar
margin 0 auto
width $progress-width
height $progress-height
background-color $progress-disabled-color
.progress
position relative
background-color lightgreen
height $progress-height
width 100%
-webkit-animation-duration 5s
-webkit-animation-name width
.progress-shadow
background-image linear-gradient(to bottom, $progress-shadow-color, transparent)
position absolute
height 4em
width 100%
top 100%
transform skew(-22.5deg)
transform-origin 0 0
@keyframes width
0%, 100%
transition-timing-function cubic-bezier(1, 0, 0.65, 0.85)
0%
width 0
100%
width 100%
View Compiled
This Pen doesn't use any external CSS resources.