WordPress实现文章阅读进度条方法
小编观察到最近一些热门网站会在文章顶部显示阅读进度条提示，提示用户还剩下多少文章可以滚动，从而鼓励他们继续阅读，今天就分享一下WordPress实现文章阅读进度条方法。
今天分享纯代码操作WordPress实现文章阅读进度条方法。
第一步：
在header.php添加css文件
<style id=’mdp-rebar-inline-css’>#mdp-rebar-wrapper.rebar-position-left {
width: calc(100vh + (8px / 2)) !important;
left: calc(8px / 2) !important;
top: calc(-8px / 2);
}
#mdp-rebar-wrapper.rebar-position-right {
width: calc(100vh + (8px / 2)) !important;
left: unset !important;
right: calc(8px / 2);
top: 100vh;
}
#mdp-rebar-element {
height: 2px;
}
</style>
第二步：
在footer.php添加js文件
<script id=’mdp-rebar-js-extra’>var mdpRebarWP = {“color”:”rgba(253, 44, 86, 0.8)”,”shadow”:”1″,”position”:”position-top”,”height”:”2″,”style”:”style-default”,”contentSelector”:””};</script>
<script defer src=’//www.themecat.net/files/js/rebar.min.js’ id=’mdp-rebar-js’></script>
注意：请将js文件保存到本地，以免后期删除不可用！
第三步：
在主题自定义css调用代码
/*
* The style of Rebar
*/
#mdp-rebar-wrapper {
z-index:99999
}
#wpadminbar+#mdp-rebar-wrapper {
margin-top:32px
}
@media screen and (max-width:782px) {
#wpadminbar+#mdp-rebar-wrapper {
margin-top:46px
}
}@media screen and (max-width:600px) {
#wpadminbar+#mdp-rebar-wrapper {
margin-top:0
}
}#mdp-rebar-element {
z-index:99999
}
.style-gradient #mdp-rebar-element {
background:#c92c2c;
background:linear-gradient(to right,#c92c2c 0,#eae42c 50%,#3cad26 100%)
}
.style-rounded #mdp-rebar-element {
border-top-right-radius:50px;
border-bottom-right-radius:50px
}
.style-plastic #mdp-rebar-element {
box-shadow:inset 0 2px 9px rgba(255,255,255,.3),inset 0 -2px 6px rgba(0,0,0,.4)
}
.style-animated #mdp-rebar-element {
position:relative
}
.style-animated #mdp-rebar-element:after {
content:””;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
z-index:1;
background-size:50px 50px;
-webkit-animation:mdp-rebar-animated 2s linear infinite;
animation:mdp-rebar-animated 2s linear infinite;
overflow:hidden
}
@-webkit-keyframes mdp-rebar-animated {
0% {
background-position:0 0
}
100% {
background-position:50px 50px
}
}@keyframes mdp-rebar-animated {
0% {
background-position:0 0
}
100% {
background-position:50px 50px
}
}.style-ios7 #mdp-rebar-element {
background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55)
}
.style-shine #mdp-rebar-element {
position:relative
}
.style-shine #mdp-rebar-element:after {
content:”;
opacity:0;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:#fff;
border-radius:3px;
-webkit-animation:mdp-rebar-animate-shine 2s ease-out infinite;
animation:mdp-rebar-animate-shine 2s ease-out infinite
}
@-webkit-keyframes mdp-rebar-animate-shine {
0% {
opacity:0;
width:0
}
50% {
opacity:.5
}
100% {
opacity:0;
width:95%
}
}@keyframes mdp-rebar-animate-shine {
0% {
opacity:0;
width:0
}
50% {
opacity:.5
}
100% {
opacity:0;
width:95%
}
}.style-glow #mdp-rebar-element {
position:relative
}
.style-glow #mdp-rebar-element:after {
content:”;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset;
-webkit-animation:mdp-rebar-animate-glow 1s ease-out infinite;
animation:mdp-rebar-animate-glow 1s ease-out infinite
}
@-webkit-keyframes mdp-rebar-animate-glow {
0% {
box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset
}
50% {
box-shadow:0 5px 5px rgba(255,255,255,.3) inset,0 -5px 5px rgba(255,255,255,.3) inset
}
100% {
box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset
}
}@keyframes mdp-rebar-animate-glow {
0% {
box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset
}
50% {
box-shadow:0 5px 5px rgba(255,255,255,.3) inset,0 -5px 5px rgba(255,255,255,.3) inset
}
100% {
box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset
}
}.rebar-position-top {
top:0
}
.rebar-position-bottom {
bottom:0
}
.rebar-position-left {
transform:rotate(90deg);
transform-origin:left
}
.rebar-position-right {
transform:rotate(90deg);
transform-origin:right
}
