效果預覽

在線演示

按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/oyJvpe

可交互視頻

此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cqwpQh7

源代碼下載

本地下載

每日前端實戰系列的全部源代碼請從 github 下載：
https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，容器中包含一個子元素，子元素內是文字：

<div class="loader"><span>Loading...</span> </div>

居中顯示：

body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: black; }

定義容器尺寸：

.loader {width: 10em;height: 10em;font-size: 30px;box-sizing: border-box; }

設置文字樣式：

.loader span {position: absolute;color: white;width: inherit;height: inherit;text-align: center;line-height: 10em;font-family: sans-serif; }

畫出組成圓的頂部弧線：

.loader {border-top: 0.3em solid hotpink;border-radius: 50%; }

用偽元素畫出組成圓的另外 2 條弧線：

.loader {position: relative; }.loader::before, .loader::after {content: '';position: absolute;width: inherit;height: inherit;border-radius: 50%;box-sizing: border-box;top: -0.2em; }.loader::before {border-top: 0.3em solid dodgerblue;transform: rotate(120deg); }.loader::after {border-top: 0.3em solid gold;transform: rotate(240deg); }

定義動畫效果：

@keyframes rotating {50% {transform: rotate(calc(180deg * var(--direction)));}100% {transform: rotate(calc(360deg * var(--direction)));} }

把動畫效果應用到圓上：

.loader {animation: rotating 2s ease-in-out infinite;--direction: 1; }

把動畫效果應用到文字上：

.loader span {animation: rotating 2s linear infinite;--direction: -1; }

最后，隱藏可能超出窗口的內容：

body {overflow: hidden; }

大功告成！

原文地址：https://segmentfault.com/a/1190000015424389

總結

以上是生活随笔為你收集整理的如何用纯 CSS 创作一个摇摇晃晃的 loader的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。