วิธีใช้ฟังก์ชันแถบความคืบหน้าต่างๆ ผ่าน HTML/CSS

ข้อกำหนด: เราจะพบกับการใช้แถบความคืบหน้าต่างๆ ในระหว่างการพัฒนา เนื่องจากมีแถบความคืบหน้าต่างๆ ในปลั๊กอินปัจจุบัน เพื่ออำนวยความสะดวกในการพัฒนาที่กำหนดเองและการปรับเปลี่ยนสไตล์ที่สะดวก เราใช้ สไตล์ HTML และ CSS ที่นี่ ฟังก์ชั่นบาร์

ในบทความนี้ เราจะเข้าใจวิธีใช้ HTML/CSS เพื่อสร้างแถบความคืบหน้าพื้นฐานและแถบความคืบหน้าที่สวยงามและภาพเคลื่อนไหว

สร้างแถบความคืบหน้าผ่านมิเตอร์แท็ก HTML สร้างแถบความคืบหน้าผ่านความคืบหน้าของแท็ก HTML ใช้ข้อจำกัดของแถบความคืบหน้าของ CSS และการไล่ระดับสีเพื่อสร้างแถบความคืบหน้าปกติและภาพเคลื่อนไหว แถบความคืบหน้าที่มีรูปทรง ใช้ CSS เพื่อสร้างแถบความคืบหน้าทรงกลม

1. เอฟเฟกต์ของแถบความคืบหน้าแนวนอนมีดังนี้

แถบความคืบหน้าที่พบบ่อยที่สุดที่เราพบคือแถบความคืบหน้าในแนวนอน นี่เป็นวิธีที่พบบ่อยที่สุด โดยส่วนใหญ่จะใช้ HTML5 เพื่อจัดเตรียมแท็กเนทิฟสองแท็ก และเพื่อใช้แถบความคืบหน้า

ตัวอย่างเฉพาะของมิเตอร์มีดังนี้:

 <p>
<span>ความสมบูรณ์:</span>
<meter min="0" max="500" value="350">350 องศา</meter>
</p>

โดยค่าต่ำสุด ค่าสูงสุด และค่าแสดงถึงค่าสูงสุด ค่าต่ำสุด และค่าปัจจุบันตามลำดับ

มาดูการใช้แท็กกัน:

 <p>
<label for="file">ความสมบูรณ์:</label>
<ความคืบหน้าสูงสุด="100" ค่า="70"> 70% </ความคืบหน้า>
</p>

ในหมู่พวกเขา คุณลักษณะ max อธิบายจำนวนงานทั้งหมดที่ต้องทำให้เสร็จสำหรับงานที่แสดงโดยองค์ประกอบความคืบหน้า และแอตทริบิวต์ value ใช้เพื่อระบุจำนวนงานที่เสร็จสมบูรณ์โดยแถบความคืบหน้า

ความแตกต่างระหว่างทั้งสองมีดังนี้: ดังนั้นคำถามคือ เมื่อพิจารณาจากการสาธิตข้างต้น ผลกระทบของทั้งสองป้ายกำกับจะเหมือนกันทุกประการ แล้วความแตกต่างคืออะไร เหตุใดจึงมีป้ายกำกับสองป้ายที่ดูเหมือนเหมือนกัน? ความแตกต่างที่ใหญ่ที่สุดระหว่างองค์ประกอบทั้งสองนี้คือความแตกต่างทางความหมาย มิเตอร์ แสดงถึงค่าการวัดสเกลาร์หรือค่าเศษส่วนภายในช่วงที่ทราบ ความคืบหน้า แสดงถึงความคืบหน้าของงาน ตัวอย่างเช่น ควรใช้ระดับความสำเร็จในปัจจุบันของข้อกำหนด และหากคุณต้องการแสดงค่าความเร็วปัจจุบันของรถยนต์ แผงหน้าปัดควรใช้มิเตอร์

ข้อจำกัดของมิเตอร์และความคืบหน้า แน่นอนว่าในข้อกำหนดทางธุรกิจจริงหรือสภาพแวดล้อมการผลิต คุณแทบไม่เคยเห็นป้ายกำกับมิเตอร์และความคืบหน้าเลย เรา ไม่สามารถปรับเปลี่ยนรูปแบบของมิเตอร์และป้ายกำกับความคืบหน้าได้อย่างมีประสิทธิภาพ เช่น สีพื้นหลัง สีพื้นหน้าความคืบหน้า ฯลฯ และสิ่งที่ร้ายแรงที่สุดคือประสิทธิภาพของสไตล์เริ่มต้นของเบราว์เซอร์ไม่สอดคล้องกันระหว่างเบราว์เซอร์ที่แตกต่างกัน นี่เป็นข้อบกพร่องร้ายแรงสำหรับธุรกิจที่แสวงหาเสถียรภาพและประสิทธิภาพ UI ที่สม่ำเสมอ! เราไม่สามารถเพิ่มเอฟเฟกต์ภาพเคลื่อนไหวและเอฟเฟกต์แบบโต้ตอบได้ เนื่องจากในบางสถานการณ์การใช้งานจริง นี่ไม่ใช่การแสดงแถบความคืบหน้าอย่างง่าย ๆ และไม่มีอะไรเพิ่มเติม ใช้ CSS เพื่อใช้งานแถบความคืบหน้า

ดังนั้นในขั้นตอนนี้ จึงมีการใช้วิธี CSS เพิ่มเติมเพื่อใช้แถบความคืบหน้า

(1) วิธีที่พบบ่อยที่สุดในการใช้เปอร์เซ็นต์เพื่อใช้แถบความคืบหน้า คือการใช้สีพื้นหลังรวมกับเปอร์เซ็นต์เพื่อสร้างแถบความคืบหน้าที่มีการไล่ระดับสี ตัวอย่าง DEMO ที่ง่ายที่สุดมีดังนี้:

 <div class="g-คอนเทนเนอร์">
<div class="g-ความคืบหน้า"></div>
</div>
<div class="g-ความคืบหน้า"></div>

ในทำนองเดียวกัน เราสามารถใช้แอตทริบิวต์สไตล์ HTML เพื่อกรอกค่าพื้นหลังให้ครบถ้วนและส่งผ่านเปอร์เซ็นต์ที่แท้จริง เราแนะนำให้ใช้แอตทริบิวต์ที่กำหนดเองของ CSS เพื่อส่งผ่านค่าดังกล่าว CSS @property เพื่อแปลงรหัสของเรา:

 <div class="g-progress" style="--ความคืบหน้า: 70%"></div>
@property --ความคืบหน้า {
ไวยากรณ์: '<เปอร์เซ็นต์>';
สืบทอด: เท็จ;
ค่าเริ่มต้น: 0%;
-
.g-ความคืบหน้า {
ระยะขอบ: อัตโนมัติ;
ความกว้าง: 240px;
ความสูง: 25px;
รัศมีเส้นขอบ: 25px;
พื้นหลัง: การไล่ระดับสีเชิงเส้น (90deg, #0f0, #0ff var (--ความคืบหน้า), โปร่งใส 0);
เส้นขอบ: 1px ทึบ #eee;
การเปลี่ยนแปลง: .3s --ความคืบหน้า;
-

2. ผลกระทบของแถบความคืบหน้าแบบวงกลมมีดังนี้:

แกนหลักคือการใช้ พื้นหลังไล่ระดับสีเชิงมุม: conic-gradient(): ตัวอย่างเอฟเฟกต์มีดังนี้:

รหัสมีดังนี้:

 <div class = "ความคืบหน้าวงกลม"
	v-for="(item,index) ในความคืบหน้ารายการ" :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">
{{ item.rate }}%
</div>
</div>
<style lang="scss" กำหนดขอบเขต>
.progress-วงกลม {
ตำแหน่ง: ญาติ;
ความกว้าง: 149rpx;
ความสูง: 149rpx;
ตระกูลฟอนต์: PingFang SC;
รัศมีชายแดน: 50%;
จอแสดงผล: ดิ้น;
จัดรายการ: กึ่งกลาง;
ปรับเนื้อหา: กึ่งกลาง;
-
	.ความคืบหน้าค่า {
	ตำแหน่ง: แน่นอน;
	การจัดแนวข้อความ: กึ่งกลาง;
	ความสูงของบรรทัด: 50rpx;
	ความกว้าง: 100%;
	น้ำหนักตัวอักษร: 400;
ขนาดตัวอักษร: 26rpx;
-
	.totalvalbox {
ความกว้างขั้นต่ำ: 217rpx;
การจัดแนวข้อความ: กึ่งกลาง;
ตำแหน่ง: แน่นอน;
ด้านล่าง: -50rpx;
น้ำหนักตัวอักษร: 400;
ขนาดตัวอักษร: 30rpx;
-
</สไตล์>

ปัญหาการเพิ่มประสิทธิภาพมีดังนี้:

ปัญหาที่มักจะเกิดขึ้นมีดังนี้: ข้อจำกัดของการใช้การไล่ระดับสีเชิงมุมของแถบความคืบหน้าของส่วนโค้ง แน่นอนว่าวิธีนี้มีข้อเสียสองประการ แน่นอนว่า เมื่อเปอร์เซ็นต์ความคืบหน้าไม่เหมือนกับตัวเลขเช่น 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% ส่วนเกิน 0.2% คือการกำจัดนามแฝง

ในบางกรณี เราจะพบแถบความคืบหน้าที่มีมุมโค้งมนที่ส่วนท้ายของแถบความคืบหน้า แน่นอนว่าสถานการณ์นี้สามารถแก้ไขได้หากสีของแถบความคืบหน้าเป็นสีทึบ เราสามารถบรรลุผลนี้ได้โดยการซ้อนสองสี วงกลมเล็กๆ ที่จุดเริ่มต้นและจุดสิ้นสุด หากแถบความคืบหน้าเป็นสีไล่ระดับสี จะต้องติดตั้งแถบความคืบหน้านี้ด้วยความช่วยเหลือของ SVG/Canvas

ตัวอย่างมีดังนี้:

html

 <div class="g-ความคืบหน้า"></div>
<div class="g-คอนเทนเนอร์">
<div class="g-ความคืบหน้า"></div>
<div class="g-circle"></div>
</div>

ซีเอสเอส

 เนื้อความ 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 class="คอนเทนเนอร์">
<div class="คลื่น-เปลี่ยน"></div>
<div class="คลื่น"></div>
</div>
.คอนเทนเนอร์ {
ความกว้าง: 200px;
ความสูง: 200px;
เส้นขอบ: RGB ทึบ 5px (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);
แอนิเมชั่น: หมุน 7s ​​เชิงเส้นไม่สิ้นสุด;
ดัชนี z: 1;
-
&::หลังจาก {
รัศมีชายแดน: 47% 42% 46% 44%;
สีพื้นหลัง: rgba (255, 255, 255, .8);
แปลงร่าง: แปล (-50%, -70%) หมุน (0);
ภาพเคลื่อนไหว: หมุน 9s เชิงเส้น -4s อนันต์;
ดัชนี 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 class="g-คอนเทนเนอร์">
<div class="g-number">98.7%</div>
<div class="g-ความคมชัด">
<div class="g-circle"></div>
<ul class="g-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
HTML,
ร่างกาย {
ความกว้าง: 100%;
ความสูง: 100%;
จอแสดงผล: ดิ้น;
พื้นหลัง: #000;
ล้น: ซ่อนเร้น;
-
.g-number {
ตำแหน่ง: แน่นอน;
ความกว้าง: 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;
-
@สำหรับ $i จาก 0 ถึง 15 {
li:nth-child(#{$i}) {
$ความกว้าง: 15 + สุ่ม(15) + px;
ซ้าย: 15 + สุ่ม (70) + px;
ด้านบน: 50%;
แปลงร่าง: แปล (-50%, -50%);
ความกว้าง: $ความกว้าง;
ความสูง: $ความกว้าง;
แอนิเมชั่น: moveToTop #{random(6) + 3}s easy-in-out -#{random(5000)/1000}s infinite;
-
-
@keyframes หมุน {
50% {
รัศมีเส้นขอบ: 45% / 42% 38% 58% 49%;
-
100% {
แปลงร่าง: แปล (-50%, -50%) หมุน (720deg);
-
-
@keyframes ย้ายToTop {
90% {
ความทึบ: 1;
-
100% {
ความทึบ: .1;
แปลงร่าง: แปล (-50%, -180px);
-
-
@keyframes hueRotate {
100% {
ตัวกรอง: ความคมชัด (15) หมุนสี (360 องศา);
-
-

5. ลากและขยาย

สุดท้ายนี้ ฉันขอแนะนำแถบความคืบหน้าที่ดีและมีคุณภาพสูงและเจ๋งๆ หลายอัน

คุณสามารถคลิกการใช้งานเอฟเฟกต์ข้างต้นโดยสมบูรณ์ - ใช้ CSS อย่างชาญฉลาดเพื่อให้ได้แอนิเมชั่นการชาร์จที่ยอดเยี่ยม

นี่เป็นการสรุปบทความนี้เกี่ยวกับวิธีใช้งานฟังก์ชันแถบความคืบหน้าต่างๆ ผ่าน HTML/CSS เพียงเท่านี้สำหรับการแนะนำบทความ สำหรับเนื้อหาแถบความคืบหน้า html css ที่เกี่ยวข้อง โปรดค้นหาบทความก่อนหน้าของ downcodes.com หรือเรียกดูบทความที่เกี่ยวข้องด้านล่างต่อไป ฉันหวังว่าคุณจะสนับสนุน downcodes.com ในอนาคต!