Thanh tiến trình CSS

::-webkit-progress-bar

progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: orange;
}

<progress value="10" max="50">progress>

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

CSS đó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

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

 <div class="progress">
   <div class="track">
       <div class="bar">div>
       <div class="bar">div>
       <div class="bar">div>
       <div class="bar">div>
       <div class="bar">div>
       <div class="bar">div>
       <div class="bar">div>
       <div class="bar">div>
       <div class="bar">div>
       <div class="bar">div>
   div>
div>
 

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

 
class="container">
    "radio" class="radio" name="progress" value="five" id="five">
    for="five" class="label">5%</label>
 
    "radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
    for="twentyfive" class="label">25%</label>
 
    "radio" class="radio" name="progress" value="fifty" id="fifty">
    for="fifty" class="label">50%</label>
 
    "radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
    for="seventyfive" class="label">75%</label>
 
    "radio" class="radio" name="progress" value="onehundred" id="onehundred">
    for="onehundred" class="label">100%</label>
 
    
class="progress">
        
class="progress-bar"></div>
    div>
div> 

Mã CSS

3. 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

 
class="container">
    
class="container__progressbars">
        
class="progressbar">
            class="progressbar__svg">
                "80" cy="80" r="70" class="progressbar__svg-circle circle-html shadow-html"> </circle>
            svg>
            class="progressbar__text shadow-html">HTML</span>
       div>
   div>
div>
 

Mã CSS

progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: orange;
}

4. 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;
}

Mã CSS

progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: orange;
}

Tì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.