Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
34 Skill Bar Và Progress Bar Cho Phát Triển Website

34 Skill Bar Và Progress Bar Cho Phát Triển Website


Ngày 16 Tháng 7 Năm 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 Skill Bar Cho Website

Đầ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ề Progress Bar CSS Javascript

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.

Thiết Kế Skill Bar JS

Skill Bar JS

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Skill Bar HTML CSS

Skill Bar HTML CSS

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Cách Tạo Skills Bar Jquery

Skills Bar Jquery

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Jquery Progress Bar

Jquery Progress Bar

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Cách Tạo Jquery Animated Progress Bar

Jquery Animated Progress Bar

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Responsive Skill Bar CSS3

Responsive Skill Bar CSS3

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Circle Progress Bar Jquery

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Jquery Progress Bar With Percentage

Jquery Progress Bar With Percentage

Kết quả bạn xem bên dưới nhé!

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

Nguồn

SVG Skill Bar

SVG Skill Bar

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Cách Tạo Skill Bar HTML5 CSS3

Skill Bar HTML5 CSS3

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Cách Tạo Animation Skill Bar CSS3

Animation Skill Bar CSS3

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Animated Responsive Skill Bar

Animated Responsive Skill Bar

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Thiết Kế Progress Bar CSS

Progress Bar CSS

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Cách Tạo Animated Flat Skill Bar

Animated Flat Skill Bar

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Cách Tạo Skill Bar Gradient

Skill Bar Gradient

Kết quả bạn xem bên dưới nhé!

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

Nguồn

Pure CSS radial progress bar

Pure CSS radial progress bar

Kết quả bạn xem bên dưới nhé!

See the Pen Pure CSS radial progress bar by Alex Marinenko (@jo-asakura) on CodePen.

Nguồn

Pure CSS Progress

Pure CSS Progress

Kết quả bạn xem bên dưới nhé!

See the Pen Pure CSS Progress by Rafael González (@rgg) on CodePen.

Nguồn

Skillset using HTML5 progress bars with CSS3 animations

Skillset using HTML5 progress bars with CSS3 animations

Kết quả bạn xem bên dưới nhé!

See the Pen Skillset using HTML5 progress bars with CSS3 animations by Pankaj Parashar (@pankajparashar) on CodePen.

Nguồn

CSS3 Radial Progress Bar

CSS3 Radial Progress Bar

Kết quả bạn xem bên dưới nhé!

See the Pen CSS3 Radial Progress Bar by Geedmo (@geedmo) on CodePen.

Nguồn

Animated Progress Bar

Animated Progress Bar

Kết quả bạn xem bên dưới nhé!

See the Pen Animated Progress Bar by Thibaut (@Thibaut) on CodePen.

Nguồn

CSS Bar Chart Using HTML5 Progress

CSS Bar Chart Using HTML5 Progress

Kết quả bạn xem bên dưới nhé!

See the Pen CSS Bar Chart Using HTML5 Progress by Geoff Graham (@geoffgraham) on CodePen.

Nguồn

Tạo Thanh Tiến Trình HTML CSS

Tạo Thanh Tiến Trình HTML CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Tapered Glow Progress Bar by Brandon (@brundolf) on CodePen.

Nguồn

Animated progress/skill bars collection

Animated progress/skill bars collection

Kết quả bạn xem bên dưới nhé!

See the Pen Animated progress/skill bars collection by foxeisen (@foxeisen) on CodePen.

Nguồn

Absolute Progress Bar Gradients

Absolute Progress Bar Gradients

Kết quả bạn xem bên dưới nhé!

See the Pen Absolute Progress Bar Gradients by Tey Tag (@pix3l) on CodePen.

Nguồn

React — Progress bar

React — Progress bar

Kết quả bạn xem bên dưới nhé!

See the Pen React — Progress bar by Rafael Derolez (@rafaelderolez) on CodePen.

Nguồn

CSS3 Animated Skill Progress bar

CSS3 Animated Skill Progress bar

Kết quả bạn xem bên dưới nhé!

See the Pen CSS3 Animated Skill Progress bar by Shah Zobayer Ahmed (@speeedsam) on CodePen.

Nguồn

Skill Bar with jQuery & CSS3

Skill Bar with jQuery & CSS3

Kết quả bạn xem bên dưới nhé!

See the Pen Skill Bar with jQuery & CSS3 by Rostislav Ugrynyuk (@ugross) on CodePen.

Nguồn

Skill Graphs

Skill Graphs

Kết quả bạn xem bên dưới nhé!

See the Pen Skill Graphs by Lopis (@lopis) on CodePen.

Nguồn

Frontend Dev Skillset

Frontend Dev Skillset

Kết quả bạn xem bên dưới nhé!

See the Pen Frontend Dev Skillset by Christian Fleschhut (@cfleschhut) on CodePen.

Nguồn

Quick Little Graph

Quick Little Graph

Kết quả bạn xem bên dưới nhé!

See the Pen Quick Little Graph by Jacob Davidson (@Reklino) on CodePen.

Nguồn

Progress Bar Skills

Progress Bar Skills

Kết quả bạn xem bên dưới nhé!

See the Pen #DailyCSSImages 30 - Bar graph by Champlow (@Chaaampy) on CodePen.

Nguồn

Circular progress bar (only CSS)

Circular progress bar (only CSS)

Kết quả bạn xem bên dưới nhé!

See the Pen Circular progress bar (only CSS) by Alvaro Felipe (@AlvaroFelipe) on CodePen.

Nguồn

Animated Skills Bar - jQuery

Animated Skills Bar - jQuery

Kết quả bạn xem bên dưới nhé!

See the Pen Animated Skills Bar - jQuery by Diana Choi (@dianachoi) on CodePen.

Nguồn

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ẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.