---
title: "WordPressのページ上部に読み込みプログレスバーを表示するコード - 憂いを忘れる一枚"
description: ページ読み込み時のプログレスバー効果は、皆さんも以前から憧れていたことと思います。以下は私が作成した、WordPressでページ上部に読み込みプログレスバーを実装するコードです。とても簡単に、クールなページ読み込みプログレスバー効果を実現できます。
canonical_url: "https://www.ikxin.com/ja/article/wordpress-loading-progress"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": ページ読み込み時のプログレスバー効果は、皆さんも以前から憧れていたことと思います。以下は私が作成した、WordPressでページ上部に読み込みプログレスバーを実装するコードです。とても簡単に、クールなページ読み込みプログレスバー効果を実現できます。
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~V29yZFByZXNz44Gu44Oa44O844K45LiK6YOo44Gr6Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O844KS6KGo56S644GZ44KL44Kz44O844OJIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~V29yZFByZXNz44Gu44Oa44O844K45LiK6YOo44Gr6Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O844KS6KGo56S644GZ44KL44Kz44O844OJ%2Cdescription_~44Oa44O844K46Kqt44G~6L6844G~5pmC44Gu44OX44Ot44Kw44Os44K544OQ44O85Yq55p6c44Gv44CB55qG44GV44KT44KC5Lul5YmN44GL44KJ5oan44KM44Gm44GE44Gf44GT44Go44Go5oCd44GE44G-44GZ44CC5Lul5LiL44Gv56eB44GM5L2c5oiQ44GX44Gf44CBV29yZFByZXNz44Gn44Oa44O844K45LiK6YOo44Gr6Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O844KS5a6f6KOF44GZ44KL44Kz44O844OJ44Gn44GZ44CC44Go44Gm44KC57Ch5Y2Y44Gr44CB44Kv44O844Or44Gq44Oa44O844K46Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O85Yq55p6c44KS5a6f54--44Gn44GN44G-44GZ44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL3dvcmRwcmVzcy1sb2FkaW5nLXByb2dyZXNzIg%2Cs_cyKuTaXhJiqql03P.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_~V29yZFByZXNz44Gu44Oa44O844K45LiK6YOo44Gr6Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O844KS6KGo56S644GZ44KL44Kz44O844OJIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~V29yZFByZXNz44Gu44Oa44O844K45LiK6YOo44Gr6Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O844KS6KGo56S644GZ44KL44Kz44O844OJ%2Cdescription_~44Oa44O844K46Kqt44G~6L6844G~5pmC44Gu44OX44Ot44Kw44Os44K544OQ44O85Yq55p6c44Gv44CB55qG44GV44KT44KC5Lul5YmN44GL44KJ5oan44KM44Gm44GE44Gf44GT44Go44Go5oCd44GE44G-44GZ44CC5Lul5LiL44Gv56eB44GM5L2c5oiQ44GX44Gf44CBV29yZFByZXNz44Gn44Oa44O844K45LiK6YOo44Gr6Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O844KS5a6f6KOF44GZ44KL44Kz44O844OJ44Gn44GZ44CC44Go44Gm44KC57Ch5Y2Y44Gr44CB44Kv44O844Or44Gq44Oa44O844K46Kqt44G~6L6844G~44OX44Ot44Kw44Os44K544OQ44O85Yq55p6c44KS5a6f54--44Gn44GN44G-44GZ44CC%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL3dvcmRwcmVzcy1sb2FkaW5nLXByb2dyZXNzIg%2Cs_cyKuTaXhJiqql03P.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,962  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/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/wordpress-loading-progress#webpage","@type":"WebPage","description":"ページ読み込み時のプログレスバー効果は、皆さんも以前から憧れていたことと思います。以下は私が作成した、WordPressでページ上部に読み込みプログレスバーを実装するコードです。とても簡単に、クールなページ読み込みプログレスバー効果を実現できます。","name":"WordPressのページ上部に読み込みプログレスバーを表示するコード","url":"https://www.ikxin.com/ja/article/wordpress-loading-progress","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/wordpress-loading-progress"]}]}]}
```

## Sitemap

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