HTML로 프로세스바(Process Bar) 만들어주기 (progress bar css)

HTML PROGRESS BAR

웹사이트를 구성하다 보면 로딩 바가 은근 많이 사용된다!

보통 css, Javascript로 만들기도 하지만

HTML만으로도 Process bar를 만들 수 있다고 한다.

 

 

🌖HTML progress tag

html에서 이용하는 progress tag는 로딩바 형태의 UI를 생성해준다.

안에 들어가는 속성은 아래와 같다.

value : 실제 값

min: progress의 최소값

max: progress의 최댓값

 

progress tag를 이용하면 아래와 같은 UI가 생성된다.

 

sample code

<h2>진행상항</h2>
<progress id="progress" value="50" min="0" max="100"></progress>

html progress로 만든 UI

실제로 0부터 100 사이의 중간인 50%까지 파란색이 차있는 것을 볼 수 있다.

 

 

 

🎨HTML Progress CSS 적용하기

기본적으로 제공하는 UI는 실제로 만들 화면상에 어울리지 않을 가능성이 높아서 CSS를 적용해줘야 한다

 

::-webkit-progress-bar

progressbar의 배경이 되는 요소

 

::-webkit-progress-value

progress의 진행 bar가 되는 요소

 

두 개의 css를 이용해서 커스텀이 가능하다.

 

이때 주의할 점은 progressbar 기본 속성으로 appearance가 웹상에서 이용하는 UI를 이용하는데

커스텀을 위해서는 progress 태그 appearance를 none으로 설정한 다음에 커스텀을 들어가야 한다.

 

 #progress {
    appearance: none;
}
#progress::-webkit-progress-bar {
    background:#f0f0f0;
    border-radius:10px;
    box-shadow: inset 3px 3px 10px #ccc;
}
#progress::-webkit-progress-value {
    border-radius:10px;
    background: #1D976C;
    background: -webkit-linear-gradient(to right, #93F9B9, #1D976C);
    background: linear-gradient(to right, #93F9B9, #1D976C);

}

 

 

progressbar html css