In this code we have a simple timeline with a progress bar for the end of the timeline. By scrolling we can see the next items of the timeline and the progress bar is filled with scrolling. The background of this timeline is green, but the background of the text of each item is white and the texts inside it are black. Each item is identified by a circle with an orange border placed on a vertical line.
HTML
<!-- This script got from www.devanswer.com -->
<div class="container-body">
<div class="header">
<h2>Scroll Indicator And Timeline</h2>
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>2021</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2020</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2019</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2018</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
* {
box-sizing: border-box;
overflow: visible!important;
}
body {
background-color: #a2da19;
font-family: Helvetica, sans-serif;
}
.timeline {
position: relative;
max-width: 1200px;
margin: 77px auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #bd8686;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.left {
left: 0;
}
.right {
left: 50%;
}
.header {
position: fixed;
top: 0;
left: 0;
z-index: 1;
max-width: 100%;
overflow: hidden;
width: 100%;
background-color: #f1f1f1;
}
.header h2 {
text-align: center;
}
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
.progress-bar {
height: 8px;
background: #04AA6D;
width: 0%;
}
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.right::after {
left: -16px;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
.container-body {
width: 90%;
margin: 0 auto;
padding: 0 15px;
}
@media screen and (max-width: 600px) {
.timeline::after {
left: 31px;
}
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.left::after, .right::after {
left: 15px;
}
.right {
left: 0%;
}
}Javascript
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("myBar").style.width = scrolled + "%";
}
