<body>
<div class="progress"></div>
<div class="percent">0%</div>
<h1>scroll me</h1>
</body>body
{
min-height:3000px;
overflow-x:scroll;
background-color: white;
font-family:'Roboto',sans-serif;
}
h1
{
position:fixed;
margin-top:75px;
left:50%;
transform: translateX(-50%);
font-weight:100;
}
.percent
{
position: fixed;
margin-top:15px;
font-size: 50px;
left:50%;
transform: translateX(-50%);
}
.progress
{
position:fixed;
display:block;
top:0;
left:50%;
transform: translateX(-50%);
border-radius:10px;
height:15px;
width:20px;
background-color:red;
transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}$(window).scroll(function (event)
{
var docWidth = $(document).width();
var scroll = $(window).scrollTop();
var percent = Math.round((scroll/docWidth)*100);
var colours = ["#ff3700","#ff8c00","#ffbf00","#eeff00","#b2ff00","#59ff00","#00ff00"];
$('.progress').css('width',scroll+'px');
if (percent <= 100)
{
$('.percent').text(percent+"%");
}
else
{
$('.percent').text("100%");
}
if (scroll >= (docWidth*1/7))
{
$('.progress').css('background-color',colours[0]);
}
else
{
$('.progress').attr('style','');
}
if (scroll >= (docWidth*2/7))
{
$('.progress').css('background-color',colours[1]);
}
if (scroll >= (docWidth*3/7))
{
$('.progress').css('background-color',colours[2]);
}
if (scroll >= (docWidth*4/7))
{
$('.progress').css('background-color',colours[3]);
}
if (scroll >= (docWidth*5/7))
{
$('.progress').css('background-color',colours[4]);
}
if (scroll >= (docWidth*6/7))
{
$('.progress').css('background-color',colours[5]);
}
if (scroll >= (docWidth*7/7))
{
$('.progress').css('background-color',colours[6]);
}
});
External CSS
This Pen doesn't use any external CSS resources.