在頁面設(shè)計(jì)中，進(jìn)度條是一個常見的元素。它可以用于展示任務(wù)進(jìn)度、文件上傳進(jìn)度等。通過使用 CSS 技術(shù)，我們可以很容易地實(shí)現(xiàn)一個漂亮、定制化的進(jìn)度條。下面我們來看一下如何實(shí)現(xiàn) CSS 進(jìn)度條。
<div class="progress">
<div class="progress-bar"></div>
</div>
.progress {
height: 10px;
background-color: #ccc;
border-radius: 5px;
}
.progress-bar {
height: 100%;
background-color: #007bff;
border-radius: 5px;
width: 0%;
}以上代碼中 `
` 元素的 `class` 屬性分別為 `progress` 和 `progress-bar`，用于設(shè)置整體樣式和進(jìn)度條樣式。其中設(shè)置進(jìn)度條高度、背景色和圓角屬性，而 `width` 屬性設(shè)置進(jìn)度條的寬度為零，后續(xù)需要使用 JavaScript 動態(tài)設(shè)置。
接下來通過 JavaScript 來實(shí)現(xiàn)進(jìn)度條的填充。
const progressBar = document.querySelector('.progress-bar');
function progress(percent) {
progressBar.style.width = `${percent}%`;
}
// 示例，進(jìn)度條從0%增加至100%，每1秒增加10%
let percent = 0;
setInterval(() =>{
progress(percent);
percent += 10;
if (percent >100) percent = 0;
}, 1000);以上代碼使用 `querySelector` 方法獲取進(jìn)度條元素，通過 `progress` 方法來控制進(jìn)度條的填充比例。其中使用了 `setInterval` 方法來模擬一個進(jìn)度條的增長過程。 實(shí)際使用時，需要根據(jù)實(shí)際需要修改參數(shù)。
通過以上代碼，我們就可以實(shí)現(xiàn)一個簡單的進(jìn)度條。如果需要更加復(fù)雜的樣式，可以通過修改 CSS 樣式來實(shí)現(xiàn)。
上一篇css連幀的動畫效果
下一篇圖片變亮css