---
title: "WordPress 顶部加载进度条代码 - 一纸忘忧"
description: "页面加载的进度条效果相信大家都仰慕已久，下面是我编写的 WordPress 实现顶部加载进度条，简简单单，就可以实现酷炫的页面加载进度条效果。"
canonical_url: "https://www.ikxin.com/article/wordpress-loading-progress"
last_updated: "2026-09-16T09:59:27.259Z"
locale: zh-cn
meta:
  "og:description": "页面加载的进度条效果相信大家都仰慕已久，下面是我编写的 WordPress 实现顶部加载进度条，简简单单，就可以实现酷炫的页面加载进度条效果。"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~V29yZFByZXNzIOmhtumDqOWKoOi9vei~m-W6puadoeS7o-eggSAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~V29yZFByZXNzIOmhtumDqOWKoOi9vei~m-W6puadoeS7o-eggQ%2Cdescription_~6aG16Z2i5Yqg6L2955qE6L-b5bqm5p2h5pWI5p6c55u45L-h5aSn5a626YO95Luw5oWV5bey5LmF77yM5LiL6Z2i5piv5oiR57yW5YaZ55qEIFdvcmRQcmVzcyDlrp7njrDpobbpg6jliqDovb3ov5vluqbmnaHvvIznroDnroDljZXljZXvvIzlsLHlj6~ku6Xlrp7njrDphbfngqvnmoTpobXpnaLliqDovb3ov5vluqbmnaHmlYjmnpzjgII%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL3dvcmRwcmVzcy1sb2FkaW5nLXByb2dyZXNzIg%2Cs_xXDdxjR4BPz3xFeV.png"
  "og:image:alt": "WordPress 顶部加载进度条代码 - 一纸忘忧"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "WordPress 顶部加载进度条代码"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~V29yZFByZXNzIOmhtumDqOWKoOi9vei~m-W6puadoeS7o-eggSAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~V29yZFByZXNzIOmhtumDqOWKoOi9vei~m-W6puadoeS7o-eggQ%2Cdescription_~6aG16Z2i5Yqg6L2955qE6L-b5bqm5p2h5pWI5p6c55u45L-h5aSn5a626YO95Luw5oWV5bey5LmF77yM5LiL6Z2i5piv5oiR57yW5YaZ55qEIFdvcmRQcmVzcyDlrp7njrDpobbpg6jliqDovb3ov5vluqbmnaHvvIznroDnroDljZXljZXvvIzlsLHlj6~ku6Xlrp7njrDphbfngqvnmoTpobXpnaLliqDovb3ov5vluqbmnaHmlYjmnpzjgII%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL3dvcmRwcmVzcy1sb2FkaW5nLXByb2dyZXNzIg%2Cs_xXDdxjR4BPz3xFeV.png"
  "twitter:image:alt": "WordPress 顶部加载进度条代码 - 一纸忘忧"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **WordPress 顶部加载进度条代码**

2017.05.26 3,945  0

页面加载的进度条效果相信大家都仰慕已久，下面是我编写的 WordPress 实现顶部加载进度条，简简单单，就可以实现酷炫的页面加载进度条效果。

WordPress 顶部加载进度条的实现，我第一时间能想到的就是 CSS 了，但是可能对 IE 低版本的浏览器兼容性不好。但玩 WordPress 的人，基本上都无视 IE 了。那么下面我就直接发布教程吧。

## CSS 代码

 CSS

```
body {
    margin: 0;
}

#progress {
    position: fixed;
    height: 2px;
    background: #2085c5;
    transition: opacity 500ms linear;
}

#progress.done {
    opacity: 0;
}

#progress span {
    position: absolute;
    height: 2px;
    -webkit-box-shadow: #2085c5 1px 0 6px 1px;
    -webkit-border-radius: 100%;
    opacity: 1;
    width: 150px;
    right: -10px;
    -webkit-animation: pulse 2s ease-out 0s infinite;
}

@-webkit-keyframes pulse {
    30% {
        opacity: .6;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: .6;
    }
}
```

## HTML 代码

 HTML

```
<div id="progress">
    <span></span>
</div>
```

## jQuery 代码

 JavaScript

```
$({property: 0}).animate({property: 100}, {
    duration: 3000,
    step: function() {
        var percentage = Math.round(this.property);
        $('#progress').css('width',  percentage + "%");
        if (percentage == 100) {
            $("#progress").addClass("done");
        }
    }
});
```

活学活用，上面设置的时间是 3 秒，根据自己的需求设置时间吧。

到这一步，WordPress 顶部加载进度条就出现了，我想你应该知道，按下 **Ctrl + F5** 是去缓存刷新，刷新后，看看刷新网页，顶部是不是出现了加载进度条了。

## **评论**

(0)

暂无评论，来说两句吧

## **发布评论**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/#website","@type":"WebSite","description":"一纸忘忧的个人网站，关于技术探索与日常生活，记录 Web 开发、服务端与 DevOps 实践，分享软件工具、数码体验，以及代码之外的见闻与思考。","inLanguage":"zh-CN","name":"一纸忘忧","url":"https://www.ikxin.com/","workTranslation":[{"@id":"https://www.ikxin.com/zh-tw#website"},{"@id":"https://www.ikxin.com/ko#website"},{"@id":"https://www.ikxin.com/en#website"},{"@id":"https://www.ikxin.com/ja#website"}]},{"@id":"https://www.ikxin.com/article/wordpress-loading-progress#webpage","@type":"WebPage","description":"页面加载的进度条效果相信大家都仰慕已久，下面是我编写的 WordPress 实现顶部加载进度条，简简单单，就可以实现酷炫的页面加载进度条效果。","name":"WordPress 顶部加载进度条代码","url":"https://www.ikxin.com/article/wordpress-loading-progress","isPartOf":{"@id":"https://www.ikxin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/article/wordpress-loading-progress"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.