<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<ul class="nav-progress">
<li class="nav-progress__step nav-progress__step--done">
<a href="#d">
<!-- <span class="nav-progress__icon">
<svg width="41" height="41" viewBox="0 0 41 41" xmlns="http://www.w3.org/2000/svg"><title>magnifying glass</title><g fill="none" fill-rule="evenodd"><path d="M-2.722 44.71h46.93V-2.21h-46.93"/><path d="M39.93 38.814c.446.448.446 1.17 0 1.62-.224.22-.517.333-.81.333-.292 0-.585-.112-.81-.334l-9.634-9.635c-3.016 2.64-6.956 4.253-11.28 4.253C7.922 35.05.243 27.374.243 17.904c0-9.47 7.68-17.147 17.15-17.147 9.473 0 17.153 7.677 17.153 17.147 0 4.324-1.613 8.263-4.254 11.28l9.637 9.63z" fill="#D8D8D8"/></g></svg>
</span> -->
<span class="nav-progress__text">
Consultation
</span>
</a>
</li>
<li class="nav-progress__step nav-progress__step--done nav-progress__step--active"><a href="#d">Proposal</a></li>
<li class="nav-progress__step nav-progress__step--current nav-progress__step--active"><a href="#d">Roof Survey</a></li>
<li class="nav-progress__step nav-progress__step--active"><a href="#d">Permit Application</a></li>
<li class="nav-progress__step"><a href="#d">Permit Approval</a></li>
<li class="nav-progress__step"><a href="#d">Installation</a></li>
<li class="nav-progress__step"><a href="#d">System Review</a></li>
<li class="nav-progress__step"><a href="#d">Inspection</a></li>
<li class="nav-progress__step"><a href="#d">Connection</a></li>
<li class="nav-progress__step"><a href="#d">Activate</a></li>
</ul>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptate quae nulla, possimus corporis, perspiciatis temporibus officiis dolores nihil beatae consequatur. Quae est debitis voluptatum adipisci dignissimos aspernatur possimus itaque!
</div>
<script>
const nav = document.querySelector('.nav-progress');
const placeShadows = function(event){
console.log('event', nav.scrollLeft, nav.scrollWidth, nav.offsetWidth);
if(nav.scrollLeft > 0) {
nav.classList.add('more-left');
} else {
nav.classList.remove('more-left');
}
if(nav.scrollLeft + nav.offsetWidth < nav.scrollWidth) {
nav.classList.add('more-right');
} else {
nav.classList.remove('more-right');
}
};
nav.addEventListener('scroll',placeShadows);
placeShadows();
</script>
.nav-progress {
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
padding-left: 0;
overflow: auto;
margin: 0;
margin-bottom: 36px;
font-size: 14px;
}
.nav-progress:before, .nav-progress:after {
-webkit-transition: all 1s;
transition: all 1s;
opacity: 0;
content: '';
height: 160px;
width: 20px;
position: fixed;
z-index: 10;
}
.nav-progress__step {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
position: relative;
margin-bottom: 36px;
color: #efefef;
}
.nav-progress__step:last-child a:after {
display: none;
}
.nav-progress__step:first-child a {
padding-left: 10px;
}
.nav-progress__step--done {
color: #35BFAE;
}
.nav-progress__step--done a {
background-color: #35BFAE;
color: white;
}
.nav-progress__step--done a:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='28' height='20' fill='%2335BFAE'%3E%3Cpolygon points='-1,-1 -1,21 26,10' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
}
.nav-progress__step--done a:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='28' height='20' fill='white'%3E%3Cpolygon points='-1,-1 -1,21 26,10' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
.nav-progress__step--current {
color: black;
}
.nav-progress__step--current a {
background-color: black;
color: white;
}
.nav-progress__step--current a:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='28' height='20' fill='black'%3E%3Cpolygon points='-1,-1 -1,21 26,10' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
}
.nav-progress__step--current a:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='28' height='20' fill='white'%3E%3Cpolygon points='-1,-1 -1,21 26,10' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
.nav-progress__step--active:before {
content: '';
position: absolute;
bottom: -36px;
left: 50%;
-webkit-transform: translateX(-40%);
transform: translateX(-40%);
width: 0;
height: 0;
border-style: solid;
border-width: 36px 40px 0 40px;
border-color: currentColor transparent transparent transparent;
}
.nav-progress__icon {
margin-bottom: 10px;
}
a {
padding-left: 36px;
padding-right: 10px;
background: #efefef;
display: inline-block;
width: 100%;
height: 160px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-decoration: none;
color: black;
min-width: 100px;
text-align: center;
}
.current.active a:before {
border-top-color: black;
}
a:hover {
text-decoration: underline;
}
a:after {
content: '';
height: 100%;
position: absolute;
z-index: 1;
right: -26px;
top: 0;
width: 26px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='28' height='20' fill='%23efefef'%3E%3Cpolygon points='-1,-1 -1,21 26,10' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.more-left:before,
.more-right:after {
-webkit-transition: all .5s;
transition: all .5s;
opacity: 1;
}
.more-left:before {
background: -webkit-radial-gradient(0 50%, farthest-side, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
background: radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}
.more-right:after {
right: 0;
background: -webkit-radial-gradient(100% 50%, farthest-side, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
background: radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}
* {
box-sizing: border-box;
}
