CSS制作加載條

網站開發中，為了提升用戶體驗，經常需要在頁面加載時顯示一個加載條。下面我們將介紹如何使用CSS制作一個簡單的加載條。

CSS代碼

以下是CSS代碼：

.loading-bar {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 0%;
background-color: #0066ff;
z-index: 9999;
transition: width .5s ease-in-out;
-webkit-transition: width .5s ease-in-out;
}
.loaded {
width: 100%;
}

HTML代碼

以下是HTML代碼：

說明

以上CSS代碼中，我們定義了一個名為“loading-bar”的類，這個類表示加載條。其中，“position:fixed”表示加載條固定在頁面的左上角，“top:0;left:0”表示距離頁面頂部和左側都為0，“height:2px”表示加載條的高度為2像素，“width:0%”表示加載條的寬度為0%，也就是默認不顯示，“background-color:#0066ff”表示加載條的背景色為藍色，“z-index:9999”表示加載條在頁面最頂層，“transition:width .5s ease-in-out”表示加載條寬度變化時有動畫效果，“-webkit-transition:width .5s ease-in-out”表示在Safari和Chrome上也應用這個動畫效果。

當頁面加載完成后，我們可以用JavaScript來添加loaded類以讓加載條變為100%寬度。

總結

使用CSS制作加載條非常簡單，只需要利用CSS過渡動畫和JavaScript控制類名即可。相比于使用插件或框架，純CSS的加載條更加輕量、易于定制，同時也能提高頁面性能。