100% {

position:relative

bottom:0

}

border-radius:3px;

0% {

#wpadminbar+#mdp-rebar-wrapper {

background-position:0 0

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

transform-origin:right

0% {

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

opacity:0;

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

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

}

* The style of Rebar

100% {

*/

}#mdp-rebar-element {

在主题自定义css调用代码

/*

}

}

第二步：

position:absolute;

opacity:0;

width:95%

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

}

}

width:0

}

content:'';

0% {

0% {

background:#c92c2c;

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

top:0;

opacity:0;

#wpadminbar+#mdp-rebar-wrapper {

}

top:0

}

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

margin-top:46px

}

}

top:0;

}@keyframes mdp-rebar-animate-shine {

z-index:99999

left:0;

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

bottom:0;

width:0

50% {

right:0;

margin-top:0

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

background:#fff;

在header.php添加css文件

}

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

background-size:50px 50px;

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

50% {

.style-gradient #mdp-rebar-element {

}

right:0;

opacity:0;

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

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

height: 2px;

bottom:0;

@-webkit-keyframes mdp-rebar-animated {

}

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

.rebar-position-bottom {

top: calc(-8px / 2);

border-bottom-right-radius:50px

}

opacity:.5

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

.rebar-position-right {

left: unset !important;

100% {

0% {

}

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

}

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

}

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

}

#wpadminbar+#mdp-rebar-wrapper {

0% {

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

100% {

left:0;

top:0;

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

width:95%

#mdp-rebar-element {

}

}

第三步：

bottom:0;

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

background-position:50px 50px

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

}

}.rebar-position-top {

100% {

z-index:99999

}

.style-shine #mdp-rebar-element {

position:absolute;

right:0;

opacity:.5

}

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

}

left:0;

border-top-right-radius:50px;

margin-top:32px

position:absolute;

}

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

.style-plastic #mdp-rebar-element {

50% {

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

position:relative

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

50% {

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

content:'';

content:"";

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

}

top: 100vh;

</style>

}

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

transform:rotate(90deg);

}@keyframes mdp-rebar-animated {

opacity:0;

transform:rotate(90deg);

}

background-position:50px 50px

#mdp-rebar-wrapper {

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

position:relative

}

第一步：

}

}

}

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

}

z-index:1;

}

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

}

right: calc(8px / 2);

background-position:0 0

.rebar-position-left {

overflow:hidden

.style-animated #mdp-rebar-element {

}@keyframes mdp-rebar-animate-glow {

transform-origin:left

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

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

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

100% {

在footer.php添加js文件

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

.style-rounded #mdp-rebar-element {

}