HTML => 진행 요소

매개 변수

매개 변수	값
최대	작업에 필요한 작업량
값	얼마나 많은 작업이 이미 완료되었는지
위치	이 속성은 `<progress>` 요소의 현재 위치를 반환합니다.
라벨	이 속성은 `<progress>` 요소 레이블 (있는 경우)의 목록을 반환합니다.

비고

<progress> 요소는 Internet Explorer 버전이 10 미만인 경우 지원되지 않습니다.

<progress> 요소는 작업 진행이 아닌 게이지에 사용되는 잘못된 요소입니다. 예를 들어 <progress> 요소를 사용하여 디스크 공간 사용을 표시하는 것은 부적절합니다. 대신 <meter> 요소는이 유형의 사용 사례에 사용할 수 있습니다.

진행

<progress> 요소는 HTML5에서 새로 추가되었으며 작업 진행 상황을 나타내는 데 사용됩니다

<progress value="22" max="100"></progress>

이것은 술집에 22 %

진행률 막대의 색상 변경

진행률 막대는 progress[value] 선택기로 스타일을 지정할 수 있습니다.

이 예제는 너비가 250px 이고 높이가 20px 진행률 표시 줄을 제공합니다.

progress[value] {
  width: 250px;
  height: 20px;
}

진행 막대는 특히 스타일을 지정하기가 어려울 수 있습니다.

Chrome / Safari / Opera

이 브라우저는 -webkit-appearance 선택기를 사용하여 진행 태그의 스타일을 지정합니다. 이를 덮어 쓰려면 모양을 다시 설정할 수 있습니다.

progress[value] {
  -webkit-appearance: none;
  appearance: none;
}

이제 컨테이너 자체를 스타일링 할 수 있습니다.

progress[value]::-webkit-progress-bar {
  background-color: "green";
}

Firefox

파이어 폭스는 진행 막대를 약간 다르게 만든다. 우리는이 스타일을 사용해야합니다.

progress[value] {
  -moz-appearance: none;
  appearance: none;
  border: none;                /* Firefox also renders a border */
}

인터넷 익스플로러

Internet Explorer 10 이상에서는 progress 요소를 지원합니다. 그러나 background-color 속성을 지원하지 않습니다. 대신 color 속성을 사용해야합니다.

progress[value]  {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  border: none;                       /* Remove border from Firefox */

  width: 250px;
  height: 20px;

  color: blue; 
}

HTML 대체

progress 요소를 지원하지 않는 브라우저의 경우이를 임시 해결책으로 사용할 수 있습니다.

<progress max="100" value="20">
    <div class="progress-bar">
        <span style="width: 20%;">Progress: 20%</span>
    </div>
</progress>

progress 태그를 지원하는 브라우저는 내부에 중첩 된 div를 무시합니다. 진행 태그를 식별 할 수없는 기존 브라우저는 대신 div를 렌더링합니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

HTML
진행 요소

수색…