Tạo thanh tiến trình đơn giản bằng CSS

Tạo thanh tiến trình đơn giản với CSS. Trong bài này tôi chia sẻ đến các bạn 2 ví dụ.

1. Nền tĩnh
2. Nền động.

Mã HTML

Nền tĩnh:

<div class="progressbar stripes">
<span class="progressbar-inner"></span>
</div>

Nền động:

<div class="progressbar stripes animated reverse slower">
<span class="progressbar-inner"></span>
</div>

Mã CSS

 @keyframes animate-stripes {
	 0% {
		 background-position: 0 0;
	}
	 100% {
		 background-position: 60px 0;
	}
}
 @keyframes auto-progress {
	 0% {
		 width: 0%;
		
	}
	 100% {
		 width: 100%;
	}
}
 .progressbar {
	 background-color: #5238d1;
	 height: 25px;
	 width: 450px;
	 margin: 50px auto;
	 border-radius: px;
	 box-shadow: 0 1px 5px #b97ebb inset, 0 1px 0 #75d69c;
}
 .stripes {
	 background-size: 30px 30px;
	 background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
 .stripes.animated {
	 animation: animate-stripes 0.6s linear infinite;
}
 .stripes.animated.slower {
	 animation-duration: 1.25s;
}
 .stripes.reverse {
	 animation-direction: reverse;
}
 .progressbar-inner {
	 display: block;
	 height: 25px;
	 width: 0%;
	 background-color: #1cc99a;
	 border-radius: 00px;
	 box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	 position: relative;
	 animation: auto-progress 10s forwards linear;
}
 

• Các bạn có thể tùy chỉnh màu, bóng đổ cho đúng nhu cầu của bạn. Ngoài ra chỉnh thời gian 10s ở Code animation: auto-progress 10s forwards linear; thành con số bạn cần.
• Nếu bạn cần hiệu ứng lặp đi lặp lại thì đổi forwards  trong animation: auto-progress 10s forwards linear; thành infinite.

Chúc các bạn thành công!

---

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!

---