---
title: "WordPress 상단 백분율 스크롤 로딩 진행률 표시줄 구현 - 근심을 잊는 한 장"
description: "얼마 전 저는 《WordPress 상단 로딩 진행률 표시줄 코드》라는 글을 작성한 적이 있습니다. 웹사이트 로딩 시간을 표시하는 용도였으며, 이번 기능과 비슷합니다."
canonical_url: "https://www.ikxin.com/ko/article/wordpress-scroll-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_~V29yZFByZXNzIOyDgeuLqCDrsLHrtoTsnKgg7Iqk7YGs66GkIOuhnOuUqSDsp4TtlonrpaAg7ZGc7Iuc7KSEIOq1rO2YhCAtIOq3vOyLrOydhCDsnorripQg7ZWcIOyepQ%2Cc_Article%2Ctitle_~V29yZFByZXNzIOyDgeuLqCDrsLHrtoTsnKgg7Iqk7YGs66GkIOuhnOuUqSDsp4TtlonrpaAg7ZGc7Iuc7KSEIOq1rO2YhA%2Cdescription_~7Ja866eIIOyghCDsoIDripQg44CKV29yZFByZXNzIOyDgeuLqCDroZzrlKkg7KeE7ZaJ66WgIO2RnOyLnOykhCDsvZTrk5zjgIvrnbzripQg6riA7J2EIOyekeyEse2VnCDsoIHsnbQg7J6I7Iq164uI64ukLiDsm7nsgqzsnbTtirgg66Gc65SpIOyLnOqwhOydhCDtkZzsi5ztlZjripQg7Jqp64-E7JiA7Jy866mwLCDsnbTrsogg6riw64ql6rO8IOu5hOyKt-2VqeuLiOuLpC4%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL3dvcmRwcmVzcy1zY3JvbGwtcHJvZ3Jlc3Mi%2Cs_3WiMZ3pRQPV0Ngvn.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_~V29yZFByZXNzIOyDgeuLqCDrsLHrtoTsnKgg7Iqk7YGs66GkIOuhnOuUqSDsp4TtlonrpaAg7ZGc7Iuc7KSEIOq1rO2YhCAtIOq3vOyLrOydhCDsnorripQg7ZWcIOyepQ%2Cc_Article%2Ctitle_~V29yZFByZXNzIOyDgeuLqCDrsLHrtoTsnKgg7Iqk7YGs66GkIOuhnOuUqSDsp4TtlonrpaAg7ZGc7Iuc7KSEIOq1rO2YhA%2Cdescription_~7Ja866eIIOyghCDsoIDripQg44CKV29yZFByZXNzIOyDgeuLqCDroZzrlKkg7KeE7ZaJ66WgIO2RnOyLnOykhCDsvZTrk5zjgIvrnbzripQg6riA7J2EIOyekeyEse2VnCDsoIHsnbQg7J6I7Iq164uI64ukLiDsm7nsgqzsnbTtirgg66Gc65SpIOyLnOqwhOydhCDtkZzsi5ztlZjripQg7Jqp64-E7JiA7Jy866mwLCDsnbTrsogg6riw64ql6rO8IOu5hOyKt-2VqeuLiOuLpC4%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL3dvcmRwcmVzcy1zY3JvbGwtcHJvZ3Jlc3Mi%2Cs_3WiMZ3pRQPV0Ngvn.png"
  "twitter:image:alt": "WordPress 상단 백분율 스크롤 로딩 진행률 표시줄 구현 - 근심을 잊는 한 장"
---

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

# **WordPress 상단 백분율 스크롤 로딩 진행률 표시줄 구현**

2017.06.06 3,997  0

얼마 전 저는 《 [WordPress 상단 로딩 진행률 표시줄 코드](https://blog.ikxin.com/archives/13.html)》라는 글을 작성한 적이 있습니다. 웹사이트 로딩 시간을 표시하는 용도였으며, 이번 기능과 비슷합니다.

오늘 여러분께 소개할 것은 가로 방향의 진행률 표시줄입니다. 웹페이지를 아래로 스크롤하면 진행률 표시줄이 점점 길어집니다. 또한 스크롤바 색상을 사용자 지정할 수도 있습니다. 현재 이 사이트에도 해당 코드가 적용되어 있으며, 이 사이트의 페이지에서 효과를 직접 확인할 수 있습니다. 아래는 코드 공유입니다.

## HTML 코드

 HTML

```
<div id="load"></div>
```

## CSS 코드

 CSS

```
#load {
    background-color: #ff6651;
    height: 3px;
    width: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
}
```

## JS 코드

 JavaScript

```
$(function() {
    function scroll_fn() {
        let document_height = $(document).height();
        let scroll_so_far = $(window).scrollTop();
        let window_height = $(window).height();
        let max_scroll = document_height - window_height;
        let scroll_percentage = scroll_so_far / (max_scroll / 100);
        $('#load').width(scroll_percentage + '%');
    }
    $(window).scroll(function() {
        scroll_fn();
    });
    $(window).resize(function() {
        scroll_fn();
    });
});
```

**주의**: HTML 코드는 `body` 태그 아래의 첫 번째 줄에 배치해야 합니다.

## **댓글**

(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-scroll-progress#webpage","@type":"WebPage","description":"얼마 전 저는 《WordPress 상단 로딩 진행률 표시줄 코드》라는 글을 작성한 적이 있습니다. 웹사이트 로딩 시간을 표시하는 용도였으며, 이번 기능과 비슷합니다.","name":"WordPress 상단 백분율 스크롤 로딩 진행률 표시줄 구현","url":"https://www.ikxin.com/ko/article/wordpress-scroll-progress","isPartOf":{"@id":"https://www.ikxin.com/ko#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ko/article/wordpress-scroll-progress"]}]}]}
```

## Sitemap

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