Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Skill Bar Cho Trang Web (2020)

Skill Bar Cho Trang Web (2020)


Ngày 16 Tháng 7 Năm 2020

Skill Bar Cho Trang Web (2020)

Skill Bar thật ra nó là một thanh tiến trình với mục đích giúp bạn có thể cho người tuyển dụng hay khách hàng có cái nhìn trực quan hơn về về kỹ năng chuyên môn của bạn. Bây giờ chúng ta sẽ cùng nhau đi vào tỉm hiểu cách xây dựng skillbar cũng như những thư viện và ví dụ liên quan nhé!

Cách Xây Dựng Skillbar Cơ Bản

Đầu tiên chúng ta sẽ tạo cấu trúc HTML cho trang web ở đoạn code dưới đây nhé:

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

Tiếp theo chúng ta sẽ đi vào thiết kế style cho các class bằng đoạn code CSS sau đây nhé:

* {box-sizing:border-box}
/* thiết lập style thẻ chứa skillbar */
.container {
  width: 100%; /* Toàn màn hình */
  background-color: #ddd; /* thiết lập background */
}
.skills {
  text-align: right; /* canh chữ cho chữ */
  padding-top: 10px; /* thêm top padding */
  padding-bottom: 10px; /* thêmbottom padding */
  color: white; /* thiết lập màu chữ */
}
.html {width: 90%; background-color: DarkOrange;} 
.css {width: 80%; background-color: DodgerBlue;} 
.js {width: 65%; background-color: Yellow;}

Và dưới đây là kết quả của đoạn code trên nhé:

See the Pen Cách Xây Dựng Skillbar Cơ Bản by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tìm Hiểu Từ w3schools

Một Số Ví Dụ Khác Về Skillbar

Tiếp theo đây chúng ta sẽ đi vào những ví dụ khác về skillbar do các bạn lập trình viên trên Codepen thiết kế và phát triển nhé!
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Pure JavaScript animated bars

See the Pen Pure JavaScript animated bars by Gabriele Romanato (@gabrieleromanato) on CodePen.

Skill bars

See the Pen Skill bars by Sebastian (@vanillacowboy) on CodePen.

Skills Bar

See the Pen Skills Bar by Yusuf Bakır (@yusufbkr) on CodePen.

Animated Progress Bars

See the Pen Animated Progress Bars by Aaron Farrar (@afarrar) on CodePen.

Animated skill bar CSS3 with percentage

See the Pen Animated skill bar CSS3 with percentage by Bastien (@Bachieee) on CodePen.

Skill Meter Responsive animado con CSS3

See the Pen Skill Meter Responsive animado con CSS3 by Josetxu (@josetxu) on CodePen.

Skill Progress Spinner

See the Pen #19 - Skill Progress Spinner (Full Control, Pure Css) by Bojan Krsmanovic (@bojankrsmanovic) on CodePen.

jQuery - Animated Skill Bars

See the Pen jQuery - Animated Skill Bars by Brian (@bdean531) on CodePen.

SVG circular progress

See the Pen SVG circular progress: CSS animated & Angle gradient by Pouya Saadeghi (@saadeghi) on CodePen.

Pure CSS horizontal bar chart

See the Pen Pure CSS horizontal bar chart with staggering animation by Kriszta (@vajkri) on CodePen.

Animated skills bar (HTML + CSS) by level

See the Pen Animated skills bar (HTML + CSS) by level by Camila Carrera (@milacarrera) on CodePen.

Animated Responsive Skill Bar

See the Pen Animated Responsive Skill Bar by Tushar Mehrotra (@MTushar) on CodePen.

Skill Bar HTML CSS

See the Pen gBIzm by kevizen (@kevizen) on CodePen.

Animated Flat-Skill Bar

See the Pen Animated Flat-Skill Bar by Axel Rayer (@Akecel) on CodePen.

Skills section

See the Pen Skills section by Kundan Kumar Mourya (@kundankumarmourya) on CodePen.

Những Thư Viện Xây Dựng Skill Bar

Nếu bạn muốn thiết kế hay sử dụng nhiều chức năng hơn cho skillbar của mình thì bạn tham khảo thêm các thư viện giúp tạo progress bar ở đây nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức về skillbar hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!