CSS로 원형 진행률 표시 줄을 만드는 방법

CSS를 사용하여 링 진행 막대를 만듭니다. Conic-Gradient 또는 Clip-Path 및 회전을 통해 달성 할 수 있습니다. 전자는 정적 또는 JavaScript 업데이트 진행에 적합하지만 후자는 부드러운 애니메이션에 더 적합합니다. CSS 변수 및 의사 요소를 통해 원형 외관을 구축하고 변환을 통해 진행 상황을 제어하고 회전 ()을 사용하여 전환을 추가하고 애니메이션 효과를 달성하고 사용자 정의 색상, 두께 및 중앙 태그를 지원하고 브라우저 호환성 및 애니메이션 요구 사항을 기반으로 적절한 메소드를 선택하십시오.

CSS로 원형 진행률 표시 줄을 만드는 것은 웹 페이지에서 진행 상황 또는 완료 비율을 시각적으로 나타내는 깨끗한 방법입니다. 순수한 CSS에는 동적 업데이트에 대한 제한이 있지만 CSS와 최소 HTML의 조합을 사용하여 기능 및 애니메이션 원형 진행 막대를 구축 할 수 있습니다. 방법은 다음과 같습니다.

1. 의사 요소 및 국경 회전과 함께 CSS 전용 접근법을 사용하십시오.

공통 방법은 진행 상황 채우기를 시뮬레이션하기 위해 회전하는 의사 요소가있는 컨테이너를 사용합니다. 이는 정적 또는 반 다이나믹 바 (JavaScript 클래스를 통해 업데이트 됨)에 적합합니다.

HTML 구조 :

 <div class = "Circular-Progress"Style = "-진행 : 75;"> </div>

CSS :

 .circular-progress {
  너비 : 100px;
  높이 : 100px;
  국경-라디우스 : 50%;
  배경 : conic-gradient (
    #4CAF50 var (-진행),
    #e0e0e0 var (-진행)
  );
  위치 : 상대;
}

.circular-progress :: 이전 {
  콘텐츠: '';
  위치 : 절대;
  상단 : 50%;
  왼쪽 : 50%;
  변환 : 번역 (-50%, -50%);
  너비 : 80%;
  높이 : 80%;
  배경 : 흰색;
  국경-라디우스 : 50%;
}

이로 인해 --progress css 변수 (예 : 75% )에 의해 정의 된 백분율로 채워진 원이 생성됩니다. conic-gradient 색깔의 아크를 그립니다. ::before pseudo element는 중심을 가려서 고리처럼 보이게합니다.

참고 : conic-gradient 현대식 브라우저에서 잘 지원되지만 오래된 브라우저에는 폴백이 필요할 수 있습니다.

2. Border 및 Clip-Path를 사용하여 링 스타일 진행 막대 만들기

얇은 원형 스트로크 (로딩 스피너와 같은)를 원한다면 클리핑 용기 내부에 테두리 요소를 사용하십시오.

HTML :

 <div class = "Progress-Ring">
  <div class = "progress-fill"> </div>
</div>

CSS :

 .progress-ring {
  너비 : 100px;
  높이 : 100px;
  국경-라디우스 : 50%;
  배경 : #e0e0e0;
  위치 : 상대;
}

.progress-fill {
  위치 : 절대;
  너비 : 100%;
  높이 : 100%;
  국경-라디우스 : 50%;
  클립 : rect (0px, 100px, 100px, 50px);
  배경 : #4CAF50;
  변환 : 회전 (135deg); / * 상단부터 시작 */
}

.progress-fill :: 이전 {
  콘텐츠: '';
  위치 : 절대;
  상단 : 0;
  왼쪽 : 0;
  너비 : 100%;
  높이 : 100%;
  국경-라디우스 : 50%;
  클립 : rect (0px, 50px, 100px, 0px);
  배경 : #4CAF50;
  변환 : 회전 (90deg); / * 진행 상황에 따라 조정 */
  변환-오리진 : 50% 50%;
}

특정 백분율 (예 : 60%)으로이를 애니메이션하기 위해 회전 각도를 계산합니다 : 360 * (progress / 100) . transform: rotate() 값 .progress-fill::before .

3. 애니메이션과 부드러운 전환을 추가하십시오

진행 상황이 변경 될 때 막대를 매끄럽게 만들려면 CSS 전환을 사용하십시오. 그러나 conic-gradient 및 clip 직접 애니메이션 할 수 없으므로 Fill 요소의 transform: rotate() 할 수 있습니다.

애니메이션의 예 :

 .progress-fill :: 이전 {
  전환 : 0.5S 편의를 변환합니다.
}

그런 다음 JavaScript를 통해 회전을 업데이트하십시오.

 const fill = document.querySelector ( '. Progress-Fill :: 이전');
// 직접 불가능하지 않음 - 대신 래퍼 또는 클래스 토글을 사용하십시오.

더 나은 접근 방식 : 컨테이너를 채우고 회전하십시오.

 <div class = "Progress-Ring">
  <div class = "Progress-Mask">
    <div class = "progress-fill"> </div>
  </div>
</div>

 .progress-mask {
  위치 : 절대;
  너비 : 100%;
  높이 : 100%;
  클립 : rect (0, 100px, 100px, 50px);
  변환 : 회전 (0DEG); / * JS에 의해 제어
}

.progress-fill {
  너비 : 100%;
  높이 : 100%;
  국경-라디우스 : 50%;
  배경 : #4CAF50;
}

이제 JavaScript를 사용하여 회전을 설정하십시오.

 함수 setProgress ( %) {
  const RONATEDEG = % * 3.6; // 360 / 100
  document.querySelector ( '. Progress-Mask'). Style.Transform = 
    `rotate ($ {rotatedeg} deg)`;
}

4. 모양을 사용자 정의하십시오

• 내부 컷 아웃을 조정하거나 대신 테두리를 사용하여 링 두께를 변경하십시오.
• 자식 요소를 사용하여 중앙에 레이블을 추가하십시오.
• CSS 변수를 사용한 주제 지원 :

   .circular-progress {
    -프로그램 : 50%;
    -FG-Color : #4CAF50;
    -BG-Color : #e0e0e0;
    배경 : conic-gradient (
      var (-fg-color) var (-진행),
      var (-bg-color) var (-진행)
    );
  }

  기본적으로 영리한 그라디언트, 클리핑 및 회전이 혼합되어 있습니다. Conic-Gradient 방법은 정적 또는 JS 업 값에 대해 가장 간단합니다. 더 부드러운 애니메이션의 경우 클립 경로 회전 메소드가 더 많은 제어를 제공합니다. 브라우저 지원 및 애니메이션 요구에 따라 선택하십시오.

  위 내용은 CSS로 원형 진행률 표시 줄을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!