技術標籤：html+css

前幾天做小程式和後臺管理專案的時候，產品說能否換一種loading，官方的不太好看，emmmmmmmmmmmm，那還能怎麼辦，只能搞了。這裡的loading大部分都是基於css實現

1、通過普通的div標籤實現

<div class="loading-container"></div>

css

	.loading-container{
            width: 50px; /*先將loading區域變成正方形*/
            height: 50px;
            animation
 
: loading-animation0.8s infinite linear;
            display: inline-block; /*將loading區域變成行內元素，防止旋轉的時候，100%寬度都在旋轉*/
            border: 3px solid #f3f3f3; /*設定四周邊框大小，並將顏色設定為淺白色*/
            border-top: 3px solid red; /*將上邊框顏色設定為紅色高亮，以便旋轉的時候能夠看到旋轉的效果*/
            border-radius: 50%; /*將邊框和內容區域都變成圓形*/
        }
 

        @keyframes loading-animation{
            0% {
                transform: rotate(0deg); /*動畫起始的時候旋轉了0度*/
            }
            100% {
                transform: rotate(360deg); /*動畫結束的時候旋轉了360度*/
            }
        }

來看下效果：

這個可以用在小程式裡面，考慮到複用性，可以封裝成元件，動態傳入顏色和顯示的文字

2、使用svg繪製

	<svg viewBox="0 0 50 50"
 
 class="loading-svg-container">
        <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
    </svg>

	.loading-svg-container {
            width: 50px; /*設定svg顯示區域大小*/
            height: 50px;
        }
        .path {
            stroke: #409eff; /*給畫筆設定一個顏色*/
            stroke-width: 2; /*設定線條的寬度*/
            stroke-dasharray: 95, 126; /*設定實現長95，虛線長126*/
            stroke-dashoffset: 0; /*設定虛線的偏移位置*/
            animation: loading-dash 1.5s ease-in-out infinite;
        }
        @keyframes loading-dash {
            0% {
                stroke-dasharray: 1, 126; /*實線部分1，虛線部分126*/
                stroke-dashoffset: 0; /*前面1/126顯示實線，後面125顯示空白*/
            }

            50% {
                stroke-dasharray: 95, 126; /*實線部分95，虛線部分126*/
                stroke-dashoffset: -31px /*順時針偏移31/126，即前31/126顯示空白，後面3/4顯示線條*/
            }

            to {
                stroke-dasharray: 6, 120; /*實線部分6，虛線部分120*/
                stroke-dashoffset: -120px; /*最後順時針偏移120/126，即前120/126顯示空白，後面6點顯示線條部分*/
            }
        }

3、通過img圖片或者字型

去網站上下載完loading的圖示或者字型後，直接丟到頁面上展示，我選擇的是一張圖片，這時候是這樣的，只是一張普通的圖片，只需要讓他轉起來就可以

<img src="loading.png" class="loading-icon">

	.loading-icon{
            animation: rotating 3s infinite linear;
        }
        @keyframes rotating {
            0% {
                transform: rotate(0deg) /*動畫起始位置為旋轉0度*/
            }

            to {
                transform: rotate(1turn) /*動畫結束位置為旋轉1圈*/
            }
        }