[Trang trí WPR] Code tiến độ phần trăm hoàn truyện hình tròn

Hello, mình là Andy.

Mình viết bài này chia sẻ với các bạn một số dạng code tiến độ phần trăm hình tròn. Đoạn code cũ mình dùng không chính xác lắm và chỉ có bốn mức phần trăm (vì mình lười, edit mấy chục chương đăng lên rồi mới quay sang gắn link cho mục lục) nên mình đã mày mò thêm một đoạn khác thể hiện bằng góc quay trông có vẻ chuyện nghiệp hơn. Đối với những bạn thường xuyên cập nhật mục lục truyện, nếu thích kiểu hình tròn, các bạn có thể dùng thử đoạn code dưới đây, phức tạp hơn nhưng cập nhật được phần trăm chính xác hơn. Vì mình không học IT nên mọi “thuật ngữ” gì gì đó trong bài mình copy hết từ trên google và trình bày theo cách hiểu của mình, nhỡ sai chỗ nào thì nhờ các bạn sửa giúp.

I. Code sử dụng lệnh transform:

Thuộc tính mấu chốt mà mình sử dụng là transform (xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng,…tìm hiểu thêm tại >đây<)

Toàn bộ đoạn code như sau:

<div style=”margin: 30px auto; width: 150px; height: 150px; border-radius: 50%; border: 5px solid silver;”>

<div style=”width: 140px; line-height: 140px; color: red; position: absolute; z-index: 3; font-weight: bold; font-size: 20px; text-align: center; background: rgb (250,250,250,0);”>PHẦN-TRĂM-TIẾN-ĐỘ</div>

<div style=”width: 120px; height: 120px; border-radius: 50%; margin-top: 10px; margin-left: 10px; position: absolute; z- index: 1; clip: rect(0px, 60px, 120px, 0px); background: MÀU-1;”></div>

<div style=”width: 120px; height: 120px; border-radius: 50%; background: MÀU-TRẮNG-HOẶC-MÀU-1; margin-top: 10px; margin-left: 10px; position: absolute; z-index: 2; clip: rect(0px, 60px, 120px, 0px); transform: rotate(GIÁ-TRỊ-GÓCdeg);”></div>

</div>

Kết quả ví dụ sau khi dùng code:

Các bạn thấy code rất dài đúng không? Mình cũng thấy vậy nhưng chưa biết rút gọn thêm thế nào, trình độ của mình đến được đây thôi :(( Mình sẽ không giải thích những thuộc tính phụ nữa mà chỉ tập trung vào transform – cốt lõi cần thay đổi thông số dựa vào tiến độ phần trăm hoàn truyện. Có thêm vài thuộc tính như position, clip và z-index để cắt ra được nửa hình tròn và xếp chồng các thành phần lên nhau nhưng mấy thông số này cố định nên mình cũng sẽ không giải thích (diễn hết từng cái ra thì bài dài lắm), các bạn tự tìm hiểu nhé (ấn vào thuộc tính sẽ ra link).

Nguyên lý hoạt động 

Nói một cách dễ hiểu nhất thì là: có hai nửa hình tròn xếp chồng lên nhau, nửa dưới cố định nửa trên xoay, nhỏ hơn 50% thì dùng nửa trên màu trắng che bớt đi, lớn hơn 50% thì xoay nửa trên cùng màu, đổ thêm màu vào (ảnh minh họa, dùng paint vẽ nên xấu zl)

Phân tích code:

[Đoạn 1 màu đỏ]: Một cái viền ngoài hình tròn màu xám, để cho đẹp và làm thuộc tính bao ngoài.

[Đoạn 2 màu xanh dương]: Một hình chữ nhật trong suốt dùng để ghi tiến độ phần trăm hoàn truyện, làm được bao nhiêu phần trăm thì tự chia rồi điền vào chỗ PHẦN-TRĂM-TIẾN-ĐỘ.

[Đoạn 3 màu nâu]: Một nửa hình tròn nằm cố định (tip nhỏ chọn MÀU-1 cho background là hãy chọn màu nhạt thôi, chọn màu đậm khi xén hình đi nó bị lộ một cái đường ngoài viền, mình cũng chẳng biết khắc phục kiểu gì, trông dở hơi lắm =.=!)

[Đoạn 4 màu xanh lá]: Một nửa hình tròn dùng để xoay, giống hệt nửa cố định nhưng có thêm thuộc tính transform.

Nào, xoay thôi…

Để điền thông số cho transform, có các trường hợp:

– Khi tiến độ bằng 50%, tức là một nửa hình tròn, chúng ta chỉ cần dùng nửa hình tròn cố định, xóa hết [đoạn 4] đi.

Ví dụ:

Kết quả thu được

50%

– Khi tiến độ nhỏ hơn 50%, tức là nhỏ hơn nửa hình tròn, áp dụng công thức (1):

(360/100) x (số %) = (giá trị góc)degree.

Điền giá trị góc tính ra được vào chỗ GIÁ-TRỊ-GÓC trong code, background bắt buộc phải là màu trắng (hoặc trùng với màu nền, nói chung là khác MÀU-1).

Ví dụ: Tiến độ là 45%, theo công thức ta có: (360/100)x45=162 degree. Nhập 162 vào giá-trị-góc trong code, background của [đoạn 3] là paleturquoise, background của [đoạn 4] là white:

Kết quả thu được

45%

– Khi tiến độ lớn hơn 50%, áp dụng công thức (2):

(360/100) x (số %) – 180 = (giá trị góc)degree

Lại điền giá trị góc tính được vào chỗ GIÁ-TRỊ-GÓC trong code, background chung MÀU-1. Riêng giá trị góc của 75% dùng công thức (1) hay (2) đều được, khuyến khích dùng công thức (1) vì trông nó đẹp hơn =)))

Ví dụ: tiến độ 60%, theo công thức ta có: (360/100)x60-180=36 degree. Thay số 36 vào giá-trị-góc trong code, backround của cả [đoạn 3] và [đoạn 4] đều là paleturquoise:

Kết quả thu được

60%

Bên trên là tất cả ba trường hợp, có ba điều cần lưu ý là TIẾN-ĐỘ-PHẦN-TRĂM, MÀU và GIÁ-TRỊ-GÓC. Công thức này mình tập trung vào transform là chính, ngoài ra mình nghĩ có thể thay đổi thuộc tính clip, nói chung là cứ lòng vòng sửa thuộc tính theo nguyên lý hoạt động là ra thôi, tạm thời mình chưa đề cập tới những cách sửa khác vì thời gian và năng lực có hạn.

Viết dài dòng vậy chứ cũng không quá khó hiểu đâu, nhưng nó phức tạp và cần nhớ nhiều thứ là thật, chế nào hơi low-tech thì cứ ghi lại công thức, áp code áp công thức là ra, khỏi cần hiểu cũng được =)))

Đương nhiên đây chỉ là một đoạn code ví dụ, tất cả các thông số phụ như khung viền, màu chữ màu nền, căn lề, kích thước… các bạn có thể tự đổi theo sở thích của bản thân để kết quả trở nên đẹp hơn nhưng chú ý những code xác định vị trí, sửa sai các hình sẽ bị chạy lung tung, không còn xếp chồng chính xác lên nhau nữa.

Một mẫu hình tròn mà mình đang sử dụng:

II. Một số dạng code khác:

Dưới đây là hai đoạn code đơn giản hơn, cũng chính là những loại cũ mà mình đã sử dụng, được chế từ code khung viền =)))

– Dạng code thể hiện mức phần trăm bằng màu gradient:

<div style=”margin: 20px auto; border: 5px solid pink; width: 120px; height: 120px; border-radius: 50%; background: MÃ-MÀU-GRADIENT; text-align: center; line-height: 115px”><span style=”color: #993366;”><strong>40%</strong></span></div>

Đối với code này, chúng ta chỉ cần lên các trang web lấy mã màu gradient (VD: cssgradient.io), lấy bốn mốc màu theo đúng tiến độ phần trăm thay vào thuộc tính background là OK.

Ví dụ lấy mã màu cho tiến độ 50%:

Sao chép dòng mã thứ hai vào thay vào thuộc tính background của code, được đoạn code như sau:

<div style=”margin: 20px auto; border: 5px solid pink; width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(34,193,195,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); text-align: center; line-height: 115px”><span style=”color: #993366;”><strong>40%</strong></span></div>

Kết quả thu được:

50%

– Dạng code bốn mức phần trăm dành cho người lười update mục lục truyện:

<div style=”margin: 30px auto; border-width: 15px; border-style: solid; border-color: top right bottom left; width: 120px; height: 120px; border-radius: 50%; background: #ffe8f8; text-align: center; line-height: 90px; “><span style=”color: #993366;”><strong>25%</strong></span></div>

Cốt lõi của code này chính là tô màu bốn phía viền, tương ứng với bốn mức phần trăm 25% – 50% – 75% – 100%.

Ví dụ: tiến độ là 25%, tô khác màu cho viền trên, ba viền trái-phải-dưới cùng màu:

<div style=”margin: 30px auto; border-width: 15px; border-style: solid; border-color: dodgerblue azure azure azure; width: 120px; height: 120px; border-radius: 50%; background: #ffe8f8; text-align: center; line-height: 90px; “><span style=”color: #993366;”><strong>25%</strong></span></div>

Kết quả thu được

25%

Vậy là xong, cơ chế rất đơn giản =)) Chúng ta chỉ cần gõ được khoảng 20% truyện, tô một viền update lên mục lục, sau đó cứ gõ dần dần, được khoảng 40-45% thì đổi sang tô hai màu viền, phần trăm ở giữa hình tròn ghi tiến độ chính xác chứ còn màu thể hiện thì không cần quá chính xác đâu, reader chỉ nhìn lướt qua cũng đủ hình dung được rồi =)))

Lời kết

Bài khá dài, cảm ơn mọi người đã đọc được đến tận đây, sau này nếu chế thêm được kiểu nào nữa mình sẽ update tiếp vào bài. Các đoạn code ví dụ bên trên mình đã đơn giản hóa để nhìn cho đỡ rườm rà, các bạn hãy thỏa thích thay đổi thông số để kết quả được đẹp hơn và phù hợp với style thiết kế của nhà mình hơn, có gì thắc mắc cứ comment bên dưới, mình sẽ giải đáp trong khả năng có thể, và hoan nghênh mọi ý kiến góp ý.

(À, dùng code thì không cần ghi cre nhưng bê/đăng lại nguyên xi bài này đi đâu thì ghi cre hộ mình nhé T^T)