홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

HTML/CSS를 통해 다양한 진행바 기능을 구현하는 방법

저자：Eve Cole 업데이트 시간：2024-12-17 11:56:52

요구 사항: 현재 플러그인에는 다양한 진행률 표시줄이 있으므로 개발 중에 다양한 진행률 표시줄을 사용하게 됩니다. 사용자 정의된 개발과 편리한 스타일 수정을 위해 여기에서는 진행률을 개발합니다. 바 기능 .

이 기사를 통해 우리는 HTML/CSS를 사용하여 다양한 기본 진행률 표시줄과 화려한 진행률 표시줄 및 해당 애니메이션을 만드는 방법을 이해합니다.

HTML 태그 미터를 통해 진행률 표시줄 만들기 HTML 진행률 표시줄의 제한 사항을 구현하려면 CSS를 사용하여 일반적인 진행률 표시줄 및 해당 애니메이션을 만듭니다. 모양의 진행률 표시줄을 사용하여 구형 진행률 표시줄을 만듭니다.

1. 가로 진행바의 효과는 다음과 같습니다.

우리가 접하는 가장 일반적인 진행률 표시줄은 가로 진행률 표시줄입니다. 이는 가장 일반적이며 주로 HTML5를 사용하여 두 개의 기본 태그를 제공하고 진행률 표시줄을 구현합니다.

미터의 구체적인 예는 다음과 같습니다. 

 <p>
<span>완전성:</span>
<meter min="0" max="500" value="350">350도</meter>
</p>

그 중 min, max, value는 각각 최대값, 최소값, 현재값을 나타냅니다.

태그의 사용법을 살펴보겠습니다. 

 <p>
<label for="file">완전성:</label>
<progress max="100" value="70"> 70% </progress>
</p>

그 중 max 속성은 진행률 요소가 나타내는 작업에 대해 완료해야 하는 총 작업량을 설명하고, value 속성은 진행률 표시줄로 완료된 작업량을 지정하는 데 사용됩니다.

둘 사이의 차이점은 다음과 같습니다. 그렇다면 문제는 위의 데모를 보면 두 레이블의 효과가 완전히 동일하다는 것입니다. 그러면 차이점은 무엇입니까? 겉보기에 동일해 보이는 라벨이 두 개 있는 이유는 무엇입니까? 이 두 요소의 가장 큰 차이점은 의미상의 차이입니다. 미터는 알려진 범위 내의 스칼라 측정 값 또는 분수 값을 나타냅니다. 진행률은 작업의 완료 진행률을 나타냅니다. 예를 들어 요구 사항의 현재 완료 수준을 사용해야 하며 자동차의 현재 속도 값을 표시하려는 경우 대시보드, 미터를 사용해야 합니다.

미터 및 진행률의 한계 물론 실제 비즈니스 요구 사항이나 생산 환경에서는 미터 및 진행률 레이블을 거의 볼 수 없습니다. 배경색, 진행 전경색 등과 같은 미터 및 진행 레이블의 스타일을 효과적으로 수정할 수 없습니다. 그리고 가장 치명적인 점은 브라우저 기본 스타일의 성능이 브라우저마다 일관되지 않는다는 것입니다. 이는 안정성과 일관된 UI 성능을 추구하는 기업에게는 치명적인 단점입니다! 일부 실제 응용 프로그램 시나리오에서는 진행률 표시줄을 단순히 표시하는 것이 아니며 CSS를 사용하여 진행률 표시줄을 구현하는 것이 아니기 때문에 일부 애니메이션 효과와 대화형 효과를 추가할 수 없습니다.

따라서 이 단계에서는 진행률 표시줄을 구현하기 위해 더 많은 CSS 메서드가 사용됩니다.

(1) 진행률 표시줄을 구현하기 위해 백분율을 사용하는 가장 일반적인 방법은 백분율과 결합된 배경색을 사용하여 그라데이션이 있는 진행률 표시줄을 만드는 것입니다. 가장 간단한 DEMO 예는 다음과 같습니다. 

 <div 클래스="g-컨테이너">
<div class="g-progress"></div>
</div>
<div class="g-progress"></div>

마찬가지로 HTML 스타일 속성을 사용하여 전체 배경 값을 채우고 실제 백분율을 전달할 수 있습니다. 물론 애니메이션 효과를 얻으려면 CSS 사용자 정의 속성을 사용하는 것이 더 좋습니다. 코드를 변환하는 CSS @property: 

 <div class="g-progress" style="--progress: 70%"></div>
@property --진행 {
구문: '<백분율>';
상속: 거짓;
초기값: 0%;
}
.g-진행 {
여백: 자동;
너비: 240px;
높이: 25px;
테두리 반경: 25px;
배경: 선형 그라데이션(90deg, #0f0, #0ff var(--progress), 투명 0);
테두리: 1px 단색 #eee;
전환: .3s --progress;
}

2. 순환 진행률 표시줄의 효과는 다음과 같습니다.

핵심은 각도 그라데이션 배경을 사용하는 것입니다. conic-gradient(): 예제 효과는 다음과 같습니다.

코드는 다음과 같습니다:

 <div 클래스="진행-원"
	v-for="(item,index) in ProgressList" :key="index"
:스타일="{
배경: `방사형 그라데이션(#fff 55%, 투명 56%), 원뿔 그라데이션(#3A7CFF ${item.rate}%, #f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0.4 : 0 }%), 방사형 그라데이션(#fff 60%, #F1F3FC 0%);`
}
">
<span class="progress-value" >{{item.name}}</span>
<div 클래스="totalvalbox" >
{{ 품목 비율 }}%
</div>
</div>
<스타일 lang="scss" 범위>
.진행-서클 {
위치: 상대;
너비: 149rpx;
높이: 149rpx;
글꼴 계열: PingFang SC;
테두리 반경: 50%;
디스플레이: 플렉스;
항목 정렬: 중앙;
내용 정당화: 센터;
}
	.진행-값 {
	위치: 절대;
	텍스트 정렬: 중앙;
	줄 높이: 50rpx;
	너비: 100%;
	글꼴 두께: 400;
글꼴 크기: 26rpx;
}
	.totalvalbox {
최소 너비: 217rpx;
텍스트 정렬: 중앙;
위치: 절대;
하단: -50rpx;
글꼴 두께: 400;
글꼴 크기: 30rpx;
}
</style>

최적화 문제는 다음과 같습니다.

여기서 발생하기 쉬운 문제는 다음과 같습니다. 원호 진행률 표시줄의 각도 그라데이션 구현의 한계 물론 이 방법에는 두 가지 단점이 있습니다. 물론, 진행률이 0°, 90°, 180°, 270°, 360°와 같은 숫자와 유사하지 않은 경우 각도 그라디언트를 사용할 때 서로 다른 색상 간의 연결에 뚜렷한 들쭉날쭉한 가장자리가 나타납니다. 원뿔형 그라데이션(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)의 예를 들어보세요.

이러한 문제에 대한 해결책은 연결 지점에 일부 그래디언트 공간을 남겨 두는 것입니다. 위의 각도 그래디언트 코드를 간단히 변환해 보겠습니다.

 {
- 배경: 원뿔형 그라데이션(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
+ 배경: 원뿔형 그라데이션(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}

위의 코드를 주의 깊게 살펴보십시오. 27%에서 27%로 변경된 것은 27%에서 27.2%로 변경된 것입니다. 변경 후 실제 효과는 다음과 같습니다.

어떤 경우에는 진행률 표시줄 끝에 둥근 모서리가 있는 진행률 표시줄이 표시될 수 있습니다. 물론 진행률 표시줄의 색상이 단색인 경우 이 문제를 해결할 수도 있습니다. 시작과 끝의 작은 원. 진행률 표시줄이 그라데이션 색상인 경우 이 진행률 표시줄은 SVG/Canvas의 도움으로 구현되어야 합니다.

예는 다음과 같습니다:

HTML

 <div class="g-progress"></div>
<div 클래스="g-컨테이너">
<div class="g-progress"></div>
<div class="g-circle"></div>
</div>

CSS

 본문, HTML {
너비: 100%;
높이: 100%;
디스플레이: 플렉스;
}
.g-컨테이너 {
위치: 상대;
여백: 자동;
너비: 200px;
높이: 200px;
}
.g-진행 {
위치: 상대;
여백: 자동;
너비: 200px;
높이: 200px;
테두리 반경: 50%;
배경: 원뿔형 그라데이션(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
마스크: 방사형 그라데이션(투명, 투명 80px, #000 80.5px, #000 0);
}
.g-원 {
위치: 절대;
상단: 0;
왼쪽: 0;
&::전에,
&::후에 {
콘텐츠: "";
위치: 절대;
상단: 90px;
왼쪽: 90px;
너비: 20px;
높이: 20px;
테두리 반경: 50%;
배경: #FFCDB2;
Z-색인: 1;
}
&::전에 {
변환: 번역(0, -90px);
}
&::후에 {
변환: 회전(90deg) 변환(0, -90px);
}
}

이 확장을 기반으로 여러 색상의 호 모양 진행률 표시줄을 구현할 수도 있습니다. (진행률 표시줄처럼 보이지는 않지만 원형 차트와 더 유사할 수 있습니다 .) 

 .g-진행 {
너비: 160px;
높이: 160px;
테두리 반경: 50%;
마스크: 방사형 그라데이션(투명, 투명 50%, #000 51%, #000 0);
배경:
원뿔형 그라데이션(
#FFCDB2 0, #FFCDB2 25%,
#B5838D 25%, #B5838D 50%,
#673ab7 50%, #673ab7 90%,
#ff5722 90.2%, #ff5722 100%
);
}

3. 구형 진행바의 효과는 다음과 같습니다

구형 진행률 표시줄도 다음과 유사하게 비교적 일반적입니다.

핵심 코드는 다음과 같습니다. 구형 컨테이너가 진행률 0% - 100%를 나타낼 때 파도의 높이를 제어하면 됩니다. 0% - 100% 사이에서 애니메이션 효과를 얻을 수 있습니다.

 <div 클래스="컨테이너">
<div class="wave-change"></div>
<div class="wave"></div>
</div>
.컨테이너 {
너비: 200px;
높이: 200px;
테두리: 5px 단색 RGB(118, 218, 255);
테두리 반경: 50%;
오버플로: 숨김;
}
.wave-변화 {
위치: 절대;
너비: 200px;
높이: 200px;
왼쪽: 0;
상단: 0;
애니메이션: 12초 무한 선형 변경;
&::전에,
&::후에{
콘텐츠: "";
위치: 절대;
너비: 400px;
높이: 400px;
상단: 0;
왼쪽: 50%;
배경색: rgba(255, 255, 255, .6);
경계 반경: 45% 47% 43% 46%;
변환: 변환(-50%, -70%) 회전(0);
애니메이션: 7초 선형 무한 회전;
Z-색인: 1;
}
&::후에 {
경계 반경: 47% 42% 46% 44%;
배경색: rgba(255, 255, 255, .8);
변환: 변환(-50%, -70%) 회전(0);
애니메이션: 9초 선형 회전 -4초 무한;
Z-인덱스: 2;
}
}
.파도 {
위치: 상대;
너비: 200px;
높이: 200px;
배경색: rgb(118, 218, 255);
테두리 반경: 50%;
}
피 {
위치: 절대;
최고: 50%;
왼쪽: 50%;
변환: 변환(-50%, -50%);
글꼴 크기: 36px;
색상: #000;
Z-지수: 10;
}
@keyframes 회전 {
에게 {
변환: 변환(-50%, -70%) 회전(360deg);
}
}
@keyframes 변경 {
에서 {
상단: 80px;
}
에게 {
상단: -120px;
}
}

4. 쿨충전 진행률 표시줄은 다음과 같습니다.

물론 CSS는 끊임없이 변화하고 있으며 진행률 표시줄의 유형은 확실히 위 범주에 국한되지 않습니다. 예를 들어, 필터를 사용하여 Huawei 휴대폰의 충전 애니메이션을 모방할 수 있습니다. 이는 진행률 표시줄을 표시하는 방법이기도 하며 순수 CSS를 사용하여 구현할 수도 있습니다.

핵심코드는 다음과 같다

 <div 클래스="g-컨테이너">
<div class="g-number">98.7%</div>
<div 클래스="g-대비">
<div class="g-circle"></div>
<ul class="g-거품">
<리></리>
<리></리>
<리></리>
<리></리>
<리></리>
<리></리>
<리></리>
<리></리>
<리></리>
<리></리>
<리></리>
<리></리>
<리></리>
<리></리>
<리></리>
</ul>
</div>
</div>
HTML,
몸 {
너비: 100%;
높이: 100%;
디스플레이: 플렉스;
배경: #000;
오버플로: 숨김;
}
.g-번호 {
위치: 절대;
너비: 300px;
최고: 27%;
텍스트 정렬: 중앙;
글꼴 크기: 32px;
Z-지수: 10;
색상: #fff;
}
.g-컨테이너 {
위치: 상대;
너비: 300px;
높이: 400px;
여백: 자동;
}
.g-대비 {
필터: 대비(10) 색상 회전(0);
너비: 300px;
높이: 400px;
배경색: #000;
오버플로: 숨김;
애니메이션:hueRotate 10s 무한 선형;
}
.g-원 {
위치: 상대;
너비: 300px;
높이: 300px;
상자 크기 조정: 테두리 상자;
필터: 흐림(8px);
&::후에 {
콘텐츠: "";
위치: 절대;
최고: 40%;
왼쪽: 50%;
변환: 변환(-50%, -50%) 회전(0);
너비: 200px;
높이: 200px;
배경색: #00ff6f;
경계 반경: 42% 38% 62% 49% / 45%;
애니메이션: 10초 무한 선형 회전;
}
&::전에 {
콘텐츠: "";
위치: 절대;
너비: 176px;
높이: 176px;
최고: 40%;
왼쪽: 50%;
변환: 변환(-50%, -50%);
테두리 반경: 50%;
배경색: #000;
Z-지수: 10;
}
}
.g-거품 {
위치: 절대;
왼쪽: 50%;
하단: 0;
너비: 100px;
높이: 40px;
변환: 변환(-50%, 0);
테두리 반경: 100px 100px 0 0;
배경색: #00ff6f;
필터: 흐림(5px);
}
리 {
위치: 절대;
테두리 반경: 50%;
배경: #00ff6f;
}
@for $i 0부터 15까지 {
li:n번째-자식(#{$i}) {
$width: 15 + 무작위(15) + px;
왼쪽: 15 + 무작위(70) + px;
최고: 50%;
변환: 변환(-50%, -50%);
너비: $너비;
높이: $너비;
animation: moveToTop #{random(6) + 3}s Ease-In-Out -#{random(5000)/1000}s 무한;
}
}
@keyframes 회전 {
50% {
경계 반경: 45% / 42% 38% 58% 49%;
}
100% {
변환: 변환(-50%, -50%) 회전(720deg);
}
}
@keyframes moveToTop {
90% {
불투명도: 1;
}
100% {
불투명도: .1;
변환: 변환(-50%, -180px);
}
}
@keyframeshueRotate {
100% {
필터: 대비(15) 색상 회전(360deg);
}
}

5. 드래그 앤 확장

마지막으로, 품질이 좋고 멋진 진행률 표시줄 몇 가지를 추천합니다.

위 효과의 전체 구현을 클릭할 수 있습니다. CSS를 영리하게 사용하여 멋진 충전 애니메이션을 얻을 수 있습니다.

이것으로 HTML/CSS를 통해 다양한 진행률 표시줄 기능을 구현하는 방법에 대한 이 기사를 마칩니다. 기사 소개는 여기까지입니다. 더 많은 관련 HTML CSS 진행률 표시줄 콘텐츠를 보려면 downcodes.com의 이전 기사를 검색하거나 아래에서 관련 기사를 계속 찾아보세요. 앞으로도 downcodes.com을 지원해 주시기 바랍니다.

관련 기사