demo scroll indicator creation
<style>
body {
margin: 0;
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
color:#fff;
}
.bax {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #960018;
}
.bax h2 {
text-align: center;
}
.bage {
width: 100%;
height: 8px;
background: #000;
}
.bade {
height: 8px;
background: orange;
width: 0%;
}
.bake {
padding: 100px 0;
margin: 50px auto 0 auto;
width: 80%;
}
</style>
<div class="bax">
<h2>Scroll Indicator Demo</h2>
<div class="bage">
<div class="bade" id="bafe" style="width: 18.7455%;"></div>
</div>
</div>
<div class="bake">
<h3>Scroll Down to See The Effect</h3>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
<p>Contrary to popular belief, Lorem Ipsum. Quem num gosta di mé, boa gentis num é. Cevadis im ampola pa arma uma pindureta. Casamentiss faiz malandris se pirulitá. Manduma pindureta
quium dia nois paga. </p>
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("bafe").style.width = scrolled + "%";
}
</script>
TOP TUTORIALS
"TOPTUTORIALS"
top tutorials all programming languages
website tools
"websitetools"
'22' Projects online website tools generator