創建漂亮的 CSS 載入器

使用我們直觀的拖放介面在幾秒鐘內生成自定義 CSS 載入動畫。無需編碼！

自訂您的Loader

裝載機類型

Color

Size 40px

Speed 1s

高級選項

Preview

.loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #165DFF; width: 40px; height: 40px; animation: spin 1s linear infinite; }  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

如何使用

使用左側的控制件自定義您的載入器
點擊「Generate CSS」按鈕
複製生成的 HTML 和 CSS 代碼
將其粘貼到您的專案中

流行的Loader示例

脈衝載入器

3 Dots 易於實施

旋轉裝載機

Classic 100% CSS

Dual Ring

雙圓現代風格

Bounce Loader

彈跳點平滑動畫

環形裝載機

帶點的圓環獨特的設計

秤裝載機

縮放點 Lightweight

如何使用 CSS 載入器

基本實現

使用此工具生成的 CSS 載入器非常簡單。只需將生成的 HTML 和 CSS 代碼複製到您的專案中即可。

第 1 步：添加 CSS

Add the generated CSS code to your stylesheet or in a