Thành phần thanh tiến trình có thể được sử dụng làm chỉ báo để hiển thị tốc độ hoàn thành của bộ dữ liệu hoặc nó có thể được sử dụng làm thành phần trình tải động. Có nhiều kích cỡ, màu sắc và kiểu dáng có sẵn
Thanh tiến trình mặc định
Sử dụng ví dụ sau về phần tử thanh tiến trình để hiển thị tỷ lệ hoàn thành là 45% bằng cách sử dụng kiểu nội tuyến và các lớp tiện ích từ Tailwind CSS
Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động
Mở rộng mãkích thước
Bạn cũng có thể sử dụng các kích thước khác nhau bằng cách sử dụng các lớp tiện ích định cỡ khác nhau từ Flowbite và Tailwind CSS
phi tiêu chuẩn. Tính năng này không chuẩn và không nằm trong lộ trình tiêu chuẩn. Không sử dụng nó trên các trang web sản xuất đối mặt với Web. nó sẽ không hoạt động cho mọi người dùng. Cũng có thể có sự không tương thích lớn giữa các lần triển khai và hành vi có thể thay đổi trong tương lai
Phần tử giả CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
3 đại diện cho toàn bộ thanh của phần tử progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
4. Thông thường, nó chỉ hiển thị dưới dạng phần chưa được lấp đầy của thanh, vì theo mặc định, nó được hiển thị bên dưới phần tử giả progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
5. Nó là con của phần tử giả progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
6 và là cha của phần tử giả progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
5Ghi chú. Để
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
5 có hiệu lực, progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
9 cần được đặt thành progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
0 trên phần tử progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
4::-webkit-progress-bar
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
Nếu bạn không sử dụng trình duyệt WebKit hoặc Blink, đoạn mã trên sẽ dẫn đến một thanh tiến trình trông như thế này
Các bạn đọc like ủng hộ MUO nhé. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêmCSS đóng một vai trò quan trọng trong việc tạo kiểu cho trang web của bạn. Sử dụng CSS, bạn có thể dễ dàng tạo các yếu tố có thể tái sử dụng như mẫu nền, thẻ, nút, thanh điều hướng, v.v. Các phần tử sẵn sàng sử dụng này giúp bạn tạo các ứng dụng web động một cách nhanh chóng và hiệu quả
Bạn có thể sử dụng các thanh tiến trình để hiển thị số liệu, cho biết sẽ mất bao lâu để tải tệp xuống hoặc cung cấp phản hồi theo thời gian thực về quy trình nền. Bạn có thể sử dụng bốn ví dụ về thanh tiến trình này trực tiếp trong các dự án của mình hoặc điều chỉnh chúng theo ý thích của bạn
1. Thanh tiến độ rời rạc
Mã trong các ví dụ này có sẵn trong kho lưu trữ GitHub và bạn được sử dụng miễn phí theo giấy phép MIT
Thanh tiến trình riêng biệt, hiện đại này sử dụng hoạt hình khung hình chính CSS để thêm hiệu ứng lũy tiến vào một phần trên trang web của bạn. Ví dụ sử dụng thuộc tính hoạt ảnh vô hạn, vì vậy các thanh rời rạc sẽ hoạt ảnh và lặp lại mãi mãi. Bạn có thể hiển thị thanh tiến trình này trong khi có điều gì đó đang diễn ra trong nền, điều này cuối cùng sẽ giúp cải thiện UX của trang web
Mã HTML
Mã CSS
body {
background-color: #2e2e2e;
}
div.track, div.bar {
box-sizing: border-box;
position: relative;
}
div.progress {
width: 100px;
padding-left: 2px;
padding-right: 2px;
height: 21px;
border-radius: 5px;
border: solid 3px #4e4e4e;
background-color: #1e1e1e;
position: absolute;
top: calc[50% - 13px];
left: calc[50% - 53px];
}
div.track {
position: relative;
width: 100%;
height: 21px;
overflow: hidden;
-webkit-animation: prgBar 5s linear 0s infinite alternate;
animation: prgBar 5s linear 0s infinite alternate;
}
div.bar {
height: 15px;
width: 6px;
background-color: #00ffff;
position: relative;
border-radius:2px;
box-shadow: 0px 0px 5px #00ffff;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 100px;
top: 3px;
float: left;
clear: top;
}
@-webkit-keyframes prgBar {
0% { width: 0% }
9.99% { width: 0% }
10% { width: 10% }
95% { width: 100% }
}
@keyframes prgBar {
0% { width: 0% }
9.99% { width: 0% }
10% { width: 10% }
95% { width: 100% }
}
2. Thanh tiến trình bước HTML và CSS thuần túy
Ví dụ này sử dụng tỷ lệ phần trăm dựa trên bước để lấp đầy thanh tiến trình. Bộ chọn CSS chỉ định màu của thanh tiến trình cho từng giá trị phần trăm. Bạn có thể điều chỉnh màu sắc bằng cách sửa đổi thuộc tính màu nền cho từng bước [# five. đã kiểm tra, #hai mươi lăm. đã kiểm tra, v.v.]. Bạn cũng có thể xóa hoặc thêm các bước mới theo yêu cầu của mình, chỉ cần đảm bảo thay đổi thuộc tính chiều rộng của các bước cho phù hợp
Mã HTML
5%
25%
50%
75%
100%
Mã CSS
________số 83. Thanh lũy tiến tối giản hình tròn
Nếu bạn muốn tạo các thanh tiến trình hình tròn, các ví dụ hoạt hình tối giản này có thể là một trong những lựa chọn tốt nhất của bạn. Thanh tiến trình hình tròn chủ yếu được sử dụng trong các trang web nặng về cá nhân, doanh nghiệp và trực quan hóa dữ liệu. Chơi với mã và thực hiện các thay đổi để phù hợp với yêu cầu của bạn. Bạn có thể thay đổi độ dài của thanh bằng cách sửa đổi thuộc tính CSS stroke-dashoffset
Mã HTML
HTML
Mã CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
04. Thanh tiến độ kỹ năng CSS
Nếu bạn muốn tạo một thanh tiến trình đơn giản với tỷ lệ phần trăm, thì thanh này có thể phù hợp. Bạn có thể thay đổi chiều cao của thanh tiến trình bằng cách sửa đổi thuộc tính chiều cao của. thanh kỹ năng và. kỹ năng. trước giờ học. Bạn có thể thay đổi độ dài bằng cách sửa đổi thuộc tính chiều rộng của các lớp [. kỹ năng1,. kỹ năng2,. kỹ năng3]
Mã HTML
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
1Mã CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
2Tìm hiểu các thủ thuật CSS đáng kinh ngạc
Sử dụng các kỹ thuật CSS này, bạn có thể tạo các thanh lũy tiến hấp dẫn, có thể tái sử dụng. Nhưng bạn có thể làm được nhiều hơn thế với CSS. CSS cung cấp nhiều tính năng để thao tác với hình ảnh, làm cho văn bản và hình ảnh phản hồi nhanh, xử lý tràn, v.v.
Chủ Đề