Javascript 如何在pushstate单页应用程序上显示正在运行的进度条

我有这个脚本来处理用pushstate和Popstate或更简单的术语加载我的页面，加载页面时不重新加载浏览器，但每次我尝试在单击链接href时添加一个运行的水平滚动条，如YouTube和Github，我似乎无法让它显示出来

我们将加载的页面附加到

<div id="div-structured-page-div">
//append page here
</div>

和实际的滚动条

<div class="sharyor-running-scroll-bar">
<div class="sharyor-running-scroll-bar-inactive">

</div>
<div class="sharyor-running-scroll-bar-progress">

</div>
</div>


.sharyor-running-scroll-bar {
display:none;   
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.sharyor-running-scroll-bar-inactive {
display: none;
}
.sharyor-running-scroll-bar .sharyor-running-scroll-bar-progress {
background: #29d;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

.sharyor-navigation-bar{
left: 0;
top: 0;
margin: 0 auto;
right: 0;
-webkit-transition: background .2s;
transition: background .2s;
}

.sharyor运行滚动条{
显示：无；
-webkit指针事件：无；
指针事件：无；
-webkit用户选择：无；
-moz用户选择：无；
用户选择：无；
}
.sharyor正在运行的滚动条处于非活动状态{
显示：无；
}
.sharyor运行滚动条.sharyor运行滚动条进度{
背景：#29d；
位置：固定；
z指数：2000；
排名：0；
右：100%；
宽度：100%；
高度：2倍；
}
.sharyor导航栏{
左：0；
排名：0；
保证金：0自动；
右：0；
-webkit转换：后台.2s；
过渡：背景2；
}

<div class="sharyor-running-scroll-bar">
<div class="sharyor-running-scroll-bar-inactive">

</div>
<div class="sharyor-running-scroll-bar-progress">

</div>
</div>


.sharyor-running-scroll-bar {
display:none;   
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.sharyor-running-scroll-bar-inactive {
display: none;
}
.sharyor-running-scroll-bar .sharyor-running-scroll-bar-progress {
background: #29d;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

.sharyor-navigation-bar{
left: 0;
top: 0;
margin: 0 auto;
right: 0;
-webkit-transition: background .2s;
transition: background .2s;
}