}

right:0;

left: unset !important;

#wpadminbar+#mdp-rebar-wrapper {

}

50% {

}

}

#mdp-rebar-wrapper {

}

在footer.php添加js文件

}

bottom:0;

}.rebar-position-top {

}.style-glow #mdp-rebar-element {

#mdp-rebar-wrapper.rebar-position-right {

}

left:0;

position:relative

0% {

}

}

}

position:absolute;

}

.rebar-position-right {

position:absolute;

background:#c92c2c;

.style-glow #mdp-rebar-element:after {

}

}

background:linear-gradient(to right,#c92c2c 0,#eae42c 50%,#3cad26 100%)

.style-animated #mdp-rebar-element:after {

在主题自定义css调用代码

</style>

}

.style-gradient #mdp-rebar-element {

width:95%

border-top-right-radius:50px;

}

#wpadminbar+#mdp-rebar-wrapper {

right:0;

box-shadow:0 5px 5px rgba(255,255,255,.3) inset,0 -5px 5px rgba(255,255,255,.3) inset

}

animation:mdp-rebar-animate-glow 1s ease-out infinite

content:"";

}.style-ios7 #mdp-rebar-element {

.style-shine #mdp-rebar-element {

}

overflow:hidden

box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset;

在header.php添加css文件

content:'';

}

top:0

}@keyframes mdp-rebar-animate-shine {

margin-top:32px

box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset

@-webkit-keyframes mdp-rebar-animate-glow {

100% {

opacity:0;

100% {

opacity:.5

}

100% {

position:relative

-webkit-animation:mdp-rebar-animate-glow 1s ease-out infinite;

bottom:0;

width:95%

0% {

position:relative

z-index:99999

background-size:50px 50px;

opacity: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);

box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset

<script>var mdpRebarWP = {"color":"rgba(253, 44, 86, 0.8)","shadow":"1","position":"position-top","height":"2","style":"style-default","contentSelector":""};</script>

opacity:.5

100% {

}#mdp-rebar-element {

box-shadow:inset 0 2px 9px rgba(255,255,255,.3),inset 0 -2px 6px rgba(0,0,0,.4)

第二步：

100% {

}

* The style of Rebar

}

-webkit-animation:mdp-rebar-animated 2s linear infinite;

@-webkit-keyframes mdp-rebar-animated {

}

margin-top:0

}

background-position:0 0

top:0;

小编观察到最近一些热门网站会在文章顶部显示阅读进度条提示，提示用户还剩下多少文章可以滚动，从而鼓励他们继续阅读，今天就分享一下WordPress实现文章阅读进度条方法。

width: calc(100vh + (8px / 2)) !important;

50% {

background-position:0 0

top: 100vh;

#mdp-rebar-element {

left: calc(8px / 2) !important;

.rebar-position-bottom {

border-radius:3px;

50% {

animation:mdp-rebar-animated 2s linear infinite;

*/

50% {

}

}

content:'';

right:0;

}

background-position:50px 50px

}

background-position:50px 50px

width: calc(100vh + (8px / 2)) !important;

.style-animated #mdp-rebar-element {

.style-plastic #mdp-rebar-element {

box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset

第三步：

transform-origin:right

@media screen and (max-width:782px) {

0% {

background:#fff;

animation:mdp-rebar-animate-shine 2s ease-out infinite

/*

opacity:0;

height: 2px;

box-shadow:0 5px 5px rgba(255,255,255,.3) inset,0 -5px 5px rgba(255,255,255,.3) inset

transform:rotate(90deg);

right: calc(8px / 2);

今天分享纯代码操作WordPress实现文章阅读进度条方法。

@-webkit-keyframes mdp-rebar-animate-shine {

top:0;

top: calc(-8px / 2);

注意：请将js文件保存到本地，以免后期删除不可用！

}

bottom:0

0% {

top:0;

}

}

.style-shine #mdp-rebar-element:after {

box-shadow:0 5px 5px rgba(255,255,255,.7) inset,0 -5px 5px rgba(255,255,255,.7) inset

z-index:99999

}

#wpadminbar+#mdp-rebar-wrapper {

0% {

<style>#mdp-rebar-wrapper.rebar-position-left {

background-image:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55)

bottom:0;

z-index:1;

}

transform-origin:left

width:0

}@keyframes mdp-rebar-animated {

}@media screen and (max-width:600px) {

第一步：

}

.rebar-position-left {

border-bottom-right-radius:50px

}@keyframes mdp-rebar-animate-glow {

left:0;

margin-top:46px

.style-rounded #mdp-rebar-element {

transform:rotate(90deg);

}

}

-webkit-animation:mdp-rebar-animate-shine 2s ease-out infinite;

}

position:absolute;

opacity:0;

left:0;

0% {

<script defer src='https://www.themecat.net/files/js/rebar.min.js'></script>

100% {

opacity:0;

width:0