STYLUS
gradient()
background-image: linear-gradient(90deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%)
background-position: 0 0
background-repeat: repeat-x
animation: movebar 5s linear infinite
body
html
.wrapper
width: 100%
height: 100%
.wrapper
position: relative
background: #e7f0f7
.progressbar
display: block
position: absolute
z-index: 9
top: 0
right: 0
bottom: 0
left: 0
margin: auto
width: 400px
height: 30px
&::before
&::after
content: ''
display: block
position: absolute
z-index: 99
top: 0
left: 0
width: 100%
height: 100%
border-radius: 15px
gradient()
&::before
box-shadow: 0 6px 10px 0 rgba(black,.1)
&::after
z-index: 9
top: 6px
-webkit-filter: blur(16px)
filter: blur(16px)
opacity: .7
.stylization
position: absolute
z-index: 999
height: 4px
width: 90%
left: 5%
top: 6px
opacity: .3
&::before
&::after
content: ''
display: block
position: absolute
height: 4px
top: 0
border-radius: 2px
&::before
background: #fff
left: 0
right: 10px
&::after
width: 6px
background: #fff
right: 0
@keyframes movebar
from
background-position: 0 0
to
background-position: 400px 0
