<div class="scrollBar1"><span></span></div>
<div class="scrollBar2"><span></span></div>
<!-- Presentation stuff -->
<div>
<svg class="scroll-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="-285 377 40 40" xml:space="preserve">
<g id="scroll">
<g>
<path class="st0" d="M-265,388.1c-0.9,0-1.6,0.7-1.6,1.6v4.1c0,0.9,0.7,1.6,1.6,1.6s1.6-0.7,1.6-1.6v-4.1
C-263.4,388.8-264.1,388.1-265,388.1" />
</g>
</g>
<g id="wheel">
<g>
<path class="st0" d="M-264,378.2h-1.9c-6.2,0.5-10.9,5.5-10.9,11.6v14.3c0,6.5,5.3,11.7,11.8,11.7
s11.8-5.3,11.8-11.7v-14.3C-253.1,383.7-257.9,378.7-264,378.2z M-255.1,404.2c0,5.4-4.4,9.8-9.9,9.8c-5.4,0-9.9-4.4-9.9-9.8
v-14.4c0-5.4,4.5-9.8,9.9-9.8s9.9,4.4,9.9,9.8V404.2z" />
</g>
</g>
</svg>
<h1>Scroll Progress Bar</h1>
<h2>Horizontal & Vertical versions</h2>
</div>
:root {
// Try different transitions for some interesting effects
--timing: ease;
// --timing: cubic-bezier(0.705, 0.785, 0.555, 1.3);
// --timing: linear;
// --timing: none;
}
.scrollBar1 {
position: fixed;
top: 95vh;
height: 2px;
width: 0%;
background: goldenrod;
transition: width 200ms var(--timing);
text-align: right;
color: #fff;
span {
position: absolute;
top: -23px;
right: 15px;
font-size: 0.7em;
font-weight: 500;
display: block;
text-align: center;
&::after {
content: "%";
font-size: 0.8em;
position: absolute;
right: -15px;
bottom: 4px;
font-weight: 700;
opacity: 0.4;
}
}
}
.scrollBar2 {
position: fixed;
top: 0;
right: 2vw;
height: 0%;
width: 10px;
background: #49e;
transition: height 200ms var(--timing);
text-align: right;
color: #fff;
display: flex;
align-items: center;
border-radius: 1em;
span {
position: absolute;
bottom: 3px;
left: 2px;
font-size: 0.7em;
font-weight: 500;
display: inline-block;
text-align: left;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: bottom right;
transform-origin: bottom left;
&::after {
content: "%";
font-size: 0.8em;
position: absolute;
right: -15px;
bottom: 4px;
font-weight: 700;
opacity: 0.4;
}
}
}
body {
position: relative;
overflow-x: hidden;
height: 200vh;
width: 100%;
background: linear-gradient(
0deg,
#111 33%,
#151515 33%,
#151515 66%,
#111 66%
);
display: flex;
align-items: center;
text-align: center;
color: #ccc;
> div {
position: absolute;
top: 35vh;
font-size: 2em;
display: block;
text-align: center;
width: 100vw;
}
}
.st0 {
fill: #ffffff;
}
h1,
h2,
h3 {
margin: 0 0 1em;
}
h1 {
font-size: 1.2em;
}
h2 {
color: #666;
font-size: 0.8em;
}
h3 {
color: #777;
font-size: 0.6em;
}
View Compiled
$(document).scroll(function (e) {
var scrollAmount = $(window).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
var roundScroll = Math.round(scrollPercent);
// For scrollbar 1
$(".scrollBar1").css("width", scrollPercent + "%");
$(".scrollBar1 span").text(roundScroll);
// For scrollbar 2
$(".scrollBar2").css("height", scrollPercent + "%");
$(".scrollBar2 span").text(roundScroll);
});
This Pen doesn't use any external CSS resources.