<h1>Rainbow Progress Bar</h1>
<p>Try hovering over the bar</p>
<div id='prog-bar-cont'>
<div id="prog-bar">
<div id="background"></div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
html, body{
height: 100%;
background-color: #FFF;
padding: 0;
margin: 0;
font-family: 'Roboto Condensed';
text-align: center;
}
#prog-bar-cont{
background: gainsboro;
width: 75vw;
height: 2.5em;
padding: 0.5em;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 50px;
box-sizing: border-box;
box-shadow: 0 0 1px 0 rgba(#000, 0.75) inset, 0 0 4px 0 rgba(#000, 0.5);
#prog-bar{
background: #000;
width: 100%;
height: 100%;
border-radius: 50px;
overflow: hidden;
position: relative;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset, 0 0 1px 3px rgba(white, 0.75) inset;
background: transparent;
&:before{
border-radius: 50px;
content: '';
display: block;
width: 100%;
height: 100%;
box-shadow: 0 0 0 1px rgba(#000, 0.3) inset, 0 0 5px 2px rgba(#FFF, 0.8) inset;
background: transparent;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
&:after{
content: '';
display: block;
position: absolute;
top: 2px;
width: 96%;
left: 50%;
margin-left: -48%;
border-radius: 20px;
height: 10px;
background: linear-gradient(to bottom, rgba(white, 0.85) 30%, transparent 120%);
}
#background{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(-90deg, violet, mix(violet, deepskyblue, 20%), mix(limegreen, yellow, 70%), yellow, orange, mix(red, deeppink, 20%));
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
transition: all 3s;
-webkit-transition: all 3s;
&:before{
content: '';
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 10px,
#000 10px,
#000 20px
);
opacity: 0.75;
mix-blend-mode: overlay;
border-radius: 50px;
}
}
}
&:hover{
#prog-bar{
#background{
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.