js+css實現進度條

其實實現進度條的方法最簡單的就是先定義好這個標籤的背景顏色這樣容易區分,還要設置好高端,一開始寬度爲0,隨之寬度的增寬進度條也會隨之變長。

<div class="propess"></div>
.propess{
	backgroundColor: skyblue;
	height: 10px;
	width: 0;
}

如果想體驗更好一些,讓進度條有一個外邊框,則需要在這個標籤外層在包圍一層div,給外層的div,設置好邊框顏色,這個div的寬度設置的要跟進度條最長的寬度一致。

<div class="out">
	<div class="inside"></div>
</div>
.out{
	border: 1px solid blue;
	width: 600px; // 這裏的寬度要跟最終進度條的寬度一致寬
}
.inside{
	backgroundColor: skyblue;
	height: 10px;
	width: 0;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章