4 thanh tiến trình CSS bạn có thể sử dụng trên trang web của mình

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 phần tử có thể sử dụng lại như mẫu nền, thẻ, nút, thanh điều hướng, v.v. Các yếu 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 thanh tiến trình để hiển thị số liệu, cho biết 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 chỉnh sửa chúng theo ý thích của bạn.

1. Thanh tiến trình rời rạc

Thanh tiến trình hiện đại, rời rạc này sử dụng hoạt ảnh khung hình chính CSS để thêm hiệu ứng tiến bộ cho một phần của 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 hì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, nó cuối cùng sẽ giúp cải thiện trải nghiệm người dùng của một 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: 
}
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 
background-color: 
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: 
position: relative;
border-radius:2px;
box-shadow: 0px 0px 5px 
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 mỗi 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 màu nền thuộc tính cho mỗi bước (#five: đã kiểm tra, #twentyfive: đã 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 chiều rộng tài sản của các bước cho phù hợp.

Mã HTML

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

Mã CSS

body {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: 
background: 
}
.container {
margin: 60px auto;
width: 400px;
text-align: center;
}
.container .progress {
margin: 0 auto;
width: 400px;
}
.progress {
padding: 4px;
background: rgba(0, 0, 0, 0.25);
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
height: 16px;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
#five:checked ~ .progress > .progress-bar {
width: 5%;
background-color: 
}
#twentyfive:checked ~ .progress > .progress-bar {
width: 25%;
background-color: 
}
#fifty:checked ~ .progress > .progress-bar {
width: 50%;
background-color: 
}
#seventyfive:checked ~ .progress > .progress-bar {
width: 75%;
background-color: 
}
#onehundred:checked ~ .progress > .progress-bar {
width: 100%;
background-color: 
}
.radio {
display: none;
}
.label {
display: inline-block;
margin: 0 5px 20px;
padding: 3px 8px;
color: 
text-shadow: 0 1px black;
border-radius: 3px;
cursor: pointer;
}
.radio:checked + .label {
color: white;
background: rgba(0, 0, 0, 0.25);
}

3. Thanh tiến bộ 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 cá nhân, doanh nghiệp và trực quan hóa dữ liệu. Chơi xung quanh 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 đột quỵ-dashoffset Thuộc tính CSS.

Mã HTML

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

Mã CSS

a {
text-decoration: none;
}
.made {
display: block;
color: 
font-size: 0.75rem;
text-align: center;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: 
}
.container__progressbars {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
min-width: 270px;
width: 100%;
min-height: 100%;
}
.progressbar {
position: relative;
width: 170px;
height: 170px;
margin: 1em;
transform: rotate(-90deg);
}
.progressbar__svg {
position: relative;
width: 100%;
height: 100%;
}
.progressbar__svg-circle {
width: 100%;
height: 100%;
fill: none;
stroke-width: 10;
stroke-dasharray: 440;
stroke-dashoffset: 440;
stroke: white;
stroke-linecap: round;
transform: translate(5px, 5px);
}
.shadow-html {
filter: drop-shadow(0 0 5px 
}
.circle-html {
-webkit-animation: anim_circle-html 1s ease-in-out forwards;
animation: anim_circle-html 1s ease-in-out forwards;
}
.progressbar__text {
position: absolute;
top: 50%;
left: 50%;
padding: 0.25em 0.5em;
color: white;
font-family: Arial, Helvetica, sans-serif;
border-radius: 0.25em;
transform: translate(-50%, -50%) rotate(90deg);
}
@-webkit-keyframes anim_circle-html {
to {
stroke-dashoffset: 22;
}
}
@keyframes anim_circle-html {
to {
stroke-dashoffset: 22;
}
}

4. Thanh tiến trình 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, 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 Chiều cao tài sản của .skill-bar và .skill: trước đây các lớp học. Bạn có thể thay đổi độ dài bằng cách sửa đổi chiều rộng tài sản của các lớp (.skill1, .skill2, .skill3).

Mã HTML

<div class="wrapper">
<h2 class="how-title">CSS3 Skill Progress bar</h2>
<br><br>
<div class="skill">
<p>HTML5</p>
<div class="skill-bar skill1">
<span class="skill-count1">95%</span>
</div>
</div>
<div class="skill">
<p>CSS3</p>
<div class="skill-bar skill2">
<span class="skill-count2">85%</span>
</div>
</div>
<div class="skill">
<p>JQUERY</p>
<div class="skill-bar skill3">
<span class="skill-count3">75%</span>
</div>
</div>
</div>

Mã CSS

.wrapper {
width: 400px;
font-family: 'Roboto', sans-serif;
margin:0 auto;
}
.skill {
margin-bottom: 35px;
position: relative;
overflow-x:hidden;
}
.skill > p {
font-size: 18px;
font-weight: 700;
color: 
margin: 0;
}
.skill:before {
width: 100%;
height: 10px;
content: "";
display: block;
position: absolute;
background: 
bottom: 0;
}
.skill-bar {
width: 100%;
height: 10px;
background:
display: block;
position: relative;
}
.skill-bar span {
position: absolute;
border-top: 5px solid 
top: -30px;
padding: 0;
font-size: 18px;
padding: 3px 0;
font-weight: 500;
}
.skill-bar {
position: relative;
}
.skill1 .skill-count1 {
right: 0;
}
.skill1 {
width: 95%;
}
.skill2 {
width: 85%;
}
.skill2 .skill-count2 {
right: 0;
}
.skill3{
width: 75%;
}
.skill3 .skill-count3 {
right: 0;
}

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 trên 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.

Đọc tiếp