小编观察到最近一些热门网站会在文章顶部显示阅读进度条提示，提示用户还剩下多少文章可以滚动，从而鼓励他们继续阅读，今天就分享一下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

}