---
title: "WordPress 상단 로딩 진행 표시줄 코드 - 근심을 잊는 한 장"
description: "페이지 로딩 진행 표시줄 효과를 여러분 모두 오랫동안 기대해 오셨을 것이라 생각합니다. 아래는 제가 작성한 WordPress 상단 로딩 진행 표시줄 구현 코드입니다. 아주 간단하게 멋진 페이지 로딩 진행 표시줄 효과를 구현할 수 있습니다."
canonical_url: "https://www.ikxin.com/ko/article/wordpress-loading-progress"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ko
meta:
  "og:description": "페이지 로딩 진행 표시줄 효과를 여러분 모두 오랫동안 기대해 오셨을 것이라 생각합니다. 아래는 제가 작성한 WordPress 상단 로딩 진행 표시줄 구현 코드입니다. 아주 간단하게 멋진 페이지 로딩 진행 표시줄 효과를 구현할 수 있습니다."
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~V29yZFByZXNzIOyDgeuLqCDroZzrlKkg7KeE7ZaJIO2RnOyLnOykhCDsvZTrk5wgLSDqt7zsi6zsnYQg7J6K64qUIO2VnCDsnqU%2Cc_Article%2Ctitle_~V29yZFByZXNzIOyDgeuLqCDroZzrlKkg7KeE7ZaJIO2RnOyLnOykhCDsvZTrk5w%2Cdescription_~7Y6Y7J207KeAIOuhnOuUqSDsp4Ttlokg7ZGc7Iuc7KSEIO2aqOqzvOulvCDsl6zrn6zrtoQg66qo65GQIOyYpOueq-uPmeyViCDquLDrjIDtlbQg7Jik7IWo7J2EIOqyg-ydtOudvCDsg53qsIHtlanri4jri6QuIOyVhOuemOuKlCDsoJzqsIAg7J6R7ISx7ZWcIFdvcmRQcmVzcyDsg4Hri6gg66Gc65SpIOynhO2WiSDtkZzsi5zspIQg6rWs7ZiEIOy9lOuTnOyeheuLiOuLpC4g7JWE7KO8IOqwhOuLqO2VmOqyjCDrqYvsp4Qg7Y6Y7J207KeAIOuhnOuUqSDsp4Ttlokg7ZGc7Iuc7KSEIO2aqOqzvOulvCDqtaztmITtlaAg7IiYIOyeiOyKteuLiOuLpC4%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL3dvcmRwcmVzcy1sb2FkaW5nLXByb2dyZXNzIg%2Cs_B2dJLiA4z9GH-mSl.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_~V29yZFByZXNzIOyDgeuLqCDroZzrlKkg7KeE7ZaJIO2RnOyLnOykhCDsvZTrk5wgLSDqt7zsi6zsnYQg7J6K64qUIO2VnCDsnqU%2Cc_Article%2Ctitle_~V29yZFByZXNzIOyDgeuLqCDroZzrlKkg7KeE7ZaJIO2RnOyLnOykhCDsvZTrk5w%2Cdescription_~7Y6Y7J207KeAIOuhnOuUqSDsp4Ttlokg7ZGc7Iuc7KSEIO2aqOqzvOulvCDsl6zrn6zrtoQg66qo65GQIOyYpOueq-uPmeyViCDquLDrjIDtlbQg7Jik7IWo7J2EIOqyg-ydtOudvCDsg53qsIHtlanri4jri6QuIOyVhOuemOuKlCDsoJzqsIAg7J6R7ISx7ZWcIFdvcmRQcmVzcyDsg4Hri6gg66Gc65SpIOynhO2WiSDtkZzsi5zspIQg6rWs7ZiEIOy9lOuTnOyeheuLiOuLpC4g7JWE7KO8IOqwhOuLqO2VmOqyjCDrqYvsp4Qg7Y6Y7J207KeAIOuhnOuUqSDsp4Ttlokg7ZGc7Iuc7KSEIO2aqOqzvOulvCDqtaztmITtlaAg7IiYIOyeiOyKteuLiOuLpC4%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL3dvcmRwcmVzcy1sb2FkaW5nLXByb2dyZXNzIg%2Cs_B2dJLiA4z9GH-mSl.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,964  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/ko#website","@type":"WebSite","description":"근심을 잊는 한 장은 기술 탐구와 일상을 다루는 개인 웹사이트입니다. 웹 개발, 백엔드 및 DevOps 실무를 기록하고 소프트웨어 도구와 디지털 경험, 코드 밖의 견문과 생각을 나눕니다.","inLanguage":"ko-KR","name":"근심을 잊는 한 장","url":"https://www.ikxin.com/ko","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ko/article/wordpress-loading-progress#webpage","@type":"WebPage","description":"페이지 로딩 진행 표시줄 효과를 여러분 모두 오랫동안 기대해 오셨을 것이라 생각합니다. 아래는 제가 작성한 WordPress 상단 로딩 진행 표시줄 구현 코드입니다. 아주 간단하게 멋진 페이지 로딩 진행 표시줄 효과를 구현할 수 있습니다.","name":"WordPress 상단 로딩 진행 표시줄 코드","url":"https://www.ikxin.com/ko/article/wordpress-loading-progress","isPartOf":{"@id":"https://www.ikxin.com/ko#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ko/article/wordpress-loading-progress"]}]}]}
```

## Sitemap

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