CSS에서 순환 진행률 표시줄을 구현하는 방법

CSS에서 원형 진행률 표시줄을 구현하는 방법: 먼저 정사각형을 그린 다음 정사각형에 동일한 크기의 두 개의 직사각형을 그립니다. 마지막으로 CSS3의 "transform:rotate" 속성을 사용하여 중첩된 링을 실제 백분율로 변환합니다. 실제 비율 회전 각도가 충분합니다.

추천: "css 비디오 튜토리얼"

진행률 표시줄의 효과는 다음과 같습니다:

전체 원의 효과 처리가 더 간단해지고 불완전 루프의 구현이 더 자세히 설명됩니다. 구현 로직 및 프로세스는 다음과 같습니다.

진행 표시줄 구성:

링: 진행 표시줄의 두 가지 색상이 잔액이 50% 미만일 때 진행 표시줄의 색상이 녹색에서 노란색으로 변경됩니다. 진행률 표시줄 구조는 두 개의 중첩된 링으로 구성됩니다. 위쪽에 중첩된 링은 남은 양(어두운 색상)을 표시하고, 아래쪽에 중첩된 링은 총량의 100%(밝은 색상)를 표시합니다.

스타일 구현:

1: 그림의 음영 부분에 표시된 대로 정사각형을 그립니다.

2: 정사각형을 균등하게 나누는 동일한 크기의 두 개의 직사각형을 그립니다. (각 직사각형은 설정되어야 합니다. 오버플로) : 숨김) 그림의 음영 부분에 표시된 대로:

3: 진행률 표시줄은 두 개의 겹쳐진 링으로 구성되어 있으므로 첫 번째 단계에서 동일한 크기의 직사각형 4개를 정사각형에 그려야 서로 다른 내용을 표시할 수 있습니다. 반지의 일부.

4: 링을 표시하려면 각 직사각형에 동일한 크기의 정사각형을 그립니다. 왼쪽 절반 직사각형의 링은 위쪽 테두리만 설정하고 오른쪽 절반 직사각형의 링은 테두리만 설정합니다. 그림의 그림자로 표시된 테두리:

5: 진행률 표시줄의 동적 백분율 진행을 실현하려면 CSS3의 변환:회전을 사용하여 위쪽 겹쳐진 링을 실제 회전으로 변환합니다. 각도는 실제 백분율을 기준으로 합니다.
남은 양이 50%보다 큰 경우 왼쪽의 중첩된 환형 회전 각도를 변경할 필요가 없으며 오른쪽의 중첩된 환형 회전 각도만 계산하면 됩니다.
남은 양이 50% 미만일 때 링 회전이 왼쪽에 겹쳐지면 왼쪽 절반 링이 완전한 하프 링으로 표시됩니다. 이때 링 부분을 덮기 위해 왼쪽 절반 링이 필요합니다. 진행 범위를 초과하는 왼쪽 사이드 링;

html 코드는 다음과 같습니다:

<p class="progress_wrap js_halfClassNameObj">
    <p class="right under">
        <p class="circleProgress rightcircle"></p>
    </p>
    <p class="left under">
        <p class="circleProgress leftcircle"></p>
    </p>
    <p class="right up">
        <p class="circleProgress rightcircle js_progressRight" style="-webkit-transform:rotate(&#39;+circleData.rightRotate.toString()+&#39;deg)"></p>
    </p>
    <p class="left up">
        <p class="circleProgress leftcircle js_progressLeft" style="-webkit-transform:rotate(&#39;+circleData.leftRotate.toString()+&#39;deg)"></p>
    </p>
    //percent小于50时需要使用遮罩进行遮挡超出环形范围部分

    <p class="left up_left_cover js_giftLeftCover" style="display:&#39;+circleData.leftCircleDisplay+&#39;">
        <p class="circleProgress leftcircle color_border_t_l04"></p>
    </p>
    <p class="num">
        <p>剩余</p>
        <p class="js_giftPercent">&#39;+circleData.percent+&#39;%</p>
    </p>
</p>

css 코드:

.progress_wrap{
                   position: relative;
                   margin:0 0 0 .14rem;
                   width:.92rem;height:.92rem;
                   //little和more用来展示黄色和绿色的效果
                   &.little{
                       .under{
                           
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_under_little;
                           }
                           .rightcircle{
                               border-right:$progress_border_under_little;
                           }
                           .leftcircle{
                               border-left:$progress_border_under_little;
                           }
                       }
                       .up{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_up_little;
                           }
                           .rightcircle{
                               border-right:$progress_border_up_little;
                           }
                           .leftcircle{
                               border-left:$progress_border_up_little;
                           }
                       }
                       //用遮挡实现左侧剩余百分比，遮住超出环形范围部分；核心是使用同心圆进行边框进行遮挡
                       .up_left_cover{
                           width:.47rem;height:.92rem;
                           .leftcircle{
                               top:-.02rem;
                               width:.74rem;height:.74rem;
                               border:.11rem solid transparent;
                               border-top:$progress_border_up_left_cover_little;
                               border-left:$progress_border_up_left_cover_little;
                               //实际值为195deg,被遮挡环颜色值深有光晕,需要将角度进行微调（-191deg）进行完全遮挡
                               -webkit-transform:rotate(-191deg);
                           }
                       }
                       
                   }
                   &.more{
                       .under{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_under;
                           }
                           .rightcircle{
                               border-right:$progress_border_under;
                           }
                           .leftcircle{
                               border-left:$progress_border_under;
                           }
                       }
                       .up{
                           .rightcircle,.leftcircle{
                               border-top:$progress_border_up;
                           }
                           .rightcircle{
                               border-right:$progress_border_up;
                           }
                           .leftcircle{
                               border-left:$progress_border_up;
                           }
                       }
                   }
                   .right,.left{
                       position: absolute;top:0;overflow:hidden;
                       width:.46rem;height:.92rem;
                       .circleProgress{
                           position: absolute; top:0;
                           width: .78rem; height: .78rem;
                           border:.07rem solid transparent; border-radius: 50%;
                           
                       }
                       .rightcircle{
                           right:0;
                           -webkit-transform: rotate(15deg);
                       }
                       .leftcircle{
                           left:0;
                           -webkit-transform: rotate(-15deg);
                       }
                       
                   }
                   .right{
                       right:0;
                   }
                   .left{
                       left:0;
                   }
                   .num{
                       position: absolute;left:50%;top:50%;
                       width:.5rem;
                       transform:translate(-50%,-50%);
                       font-size:.12rem;color:$public_auxiliary_col;text-align:center;line-height:.26rem;
                   }
               }

링 회전 각도 변환 다양한 요구에 따라 미세 조정이 필요합니다.

좋은 제안이 있으면 자유롭게 공유해 주세요.

위 내용은 CSS에서 순환 진행률 표시줄을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!