加载中

加载中动画用于指示正在加载某些内容。

类名	类型
loading	组件	加载元素
loading-spinner	样式	旋转动画
loading-dots	样式	点动画
loading-ring	样式	环形动画
loading-ball	样式	球形动画
loading-bars	样式	条形动画
loading-infinity	样式	无限动画
loading-xs	尺寸	超小尺寸
loading-sm	尺寸	小尺寸
loading-md	尺寸	中等尺寸[默认]
loading-lg	尺寸	大尺寸
loading-xl	尺寸	超大尺寸

加载中旋转

<span class="$$loading $$loading-spinner $$loading-xs"></span>
<span class="$$loading $$loading-spinner $$loading-sm"></span>
<span class="$$loading $$loading-spinner $$loading-md"></span>
<span class="$$loading $$loading-spinner $$loading-lg"></span>
<span class="$$loading $$loading-spinner $$loading-xl"></span>

<span class="$$loading $$loading-spinner $$loading-xs"></span>
<span class="$$loading $$loading-spinner $$loading-sm"></span>
<span class="$$loading $$loading-spinner $$loading-md"></span>
<span class="$$loading $$loading-spinner $$loading-lg"></span>
<span class="$$loading $$loading-spinner $$loading-xl"></span>

            
                <span class="$$loading $$loading-spinner $$loading-xs"></span>
<span class="$$loading $$loading-spinner $$loading-sm"></span>
<span class="$$loading $$loading-spinner $$loading-md"></span>
<span class="$$loading $$loading-spinner $$loading-lg"></span>
<span class="$$loading $$loading-spinner $$loading-xl"></span>

<span class="$$loading $$loading-spinner $$loading-xs"></span>
<span class="$$loading $$loading-spinner $$loading-sm"></span>
<span class="$$loading $$loading-spinner $$loading-md"></span>
<span class="$$loading $$loading-spinner $$loading-lg"></span>
<span class="$$loading $$loading-spinner $$loading-xl"></span>

加载中点

<span class="$$loading $$loading-dots $$loading-xs"></span>
<span class="$$loading $$loading-dots $$loading-sm"></span>
<span class="$$loading $$loading-dots $$loading-md"></span>
<span class="$$loading $$loading-dots $$loading-lg"></span>
<span class="$$loading $$loading-dots $$loading-xl"></span>

<span class="$$loading $$loading-dots $$loading-xs"></span>
<span class="$$loading $$loading-dots $$loading-sm"></span>
<span class="$$loading $$loading-dots $$loading-md"></span>
<span class="$$loading $$loading-dots $$loading-lg"></span>
<span class="$$loading $$loading-dots $$loading-xl"></span>

            
                <span class="$$loading $$loading-dots $$loading-xs"></span>
<span class="$$loading $$loading-dots $$loading-sm"></span>
<span class="$$loading $$loading-dots $$loading-md"></span>
<span class="$$loading $$loading-dots $$loading-lg"></span>
<span class="$$loading $$loading-dots $$loading-xl"></span>

<span class="$$loading $$loading-dots $$loading-xs"></span>
<span class="$$loading $$loading-dots $$loading-sm"></span>
<span class="$$loading $$loading-dots $$loading-md"></span>
<span class="$$loading $$loading-dots $$loading-lg"></span>
<span class="$$loading $$loading-dots $$loading-xl"></span>

加载中环

<span class="$$loading $$loading-ring $$loading-xs"></span>
<span class="$$loading $$loading-ring $$loading-sm"></span>
<span class="$$loading $$loading-ring $$loading-md"></span>
<span class="$$loading $$loading-ring $$loading-lg"></span>
<span class="$$loading $$loading-ring $$loading-xl"></span>

<span class="$$loading $$loading-ring $$loading-xs"></span>
<span class="$$loading $$loading-ring $$loading-sm"></span>
<span class="$$loading $$loading-ring $$loading-md"></span>
<span class="$$loading $$loading-ring $$loading-lg"></span>
<span class="$$loading $$loading-ring $$loading-xl"></span>

            
                <span class="$$loading $$loading-ring $$loading-xs"></span>
<span class="$$loading $$loading-ring $$loading-sm"></span>
<span class="$$loading $$loading-ring $$loading-md"></span>
<span class="$$loading $$loading-ring $$loading-lg"></span>
<span class="$$loading $$loading-ring $$loading-xl"></span>

<span class="$$loading $$loading-ring $$loading-xs"></span>
<span class="$$loading $$loading-ring $$loading-sm"></span>
<span class="$$loading $$loading-ring $$loading-md"></span>
<span class="$$loading $$loading-ring $$loading-lg"></span>
<span class="$$loading $$loading-ring $$loading-xl"></span>

加载中球

<span class="$$loading $$loading-ball $$loading-xs"></span>
<span class="$$loading $$loading-ball $$loading-sm"></span>
<span class="$$loading $$loading-ball $$loading-md"></span>
<span class="$$loading $$loading-ball $$loading-lg"></span>
<span class="$$loading $$loading-ball $$loading-xl"></span>

<span class="$$loading $$loading-ball $$loading-xs"></span>
<span class="$$loading $$loading-ball $$loading-sm"></span>
<span class="$$loading $$loading-ball $$loading-md"></span>
<span class="$$loading $$loading-ball $$loading-lg"></span>
<span class="$$loading $$loading-ball $$loading-xl"></span>

            
                <span class="$$loading $$loading-ball $$loading-xs"></span>
<span class="$$loading $$loading-ball $$loading-sm"></span>
<span class="$$loading $$loading-ball $$loading-md"></span>
<span class="$$loading $$loading-ball $$loading-lg"></span>
<span class="$$loading $$loading-ball $$loading-xl"></span>

<span class="$$loading $$loading-ball $$loading-xs"></span>
<span class="$$loading $$loading-ball $$loading-sm"></span>
<span class="$$loading $$loading-ball $$loading-md"></span>
<span class="$$loading $$loading-ball $$loading-lg"></span>
<span class="$$loading $$loading-ball $$loading-xl"></span>

加载中条

<span class="$$loading $$loading-bars $$loading-xs"></span>
<span class="$$loading $$loading-bars $$loading-sm"></span>
<span class="$$loading $$loading-bars $$loading-md"></span>
<span class="$$loading $$loading-bars $$loading-lg"></span>
<span class="$$loading $$loading-bars $$loading-xl"></span>

<span class="$$loading $$loading-bars $$loading-xs"></span>
<span class="$$loading $$loading-bars $$loading-sm"></span>
<span class="$$loading $$loading-bars $$loading-md"></span>
<span class="$$loading $$loading-bars $$loading-lg"></span>
<span class="$$loading $$loading-bars $$loading-xl"></span>

            
                <span class="$$loading $$loading-bars $$loading-xs"></span>
<span class="$$loading $$loading-bars $$loading-sm"></span>
<span class="$$loading $$loading-bars $$loading-md"></span>
<span class="$$loading $$loading-bars $$loading-lg"></span>
<span class="$$loading $$loading-bars $$loading-xl"></span>

<span class="$$loading $$loading-bars $$loading-xs"></span>
<span class="$$loading $$loading-bars $$loading-sm"></span>
<span class="$$loading $$loading-bars $$loading-md"></span>
<span class="$$loading $$loading-bars $$loading-lg"></span>
<span class="$$loading $$loading-bars $$loading-xl"></span>

加载中无限

<span class="$$loading $$loading-infinity $$loading-xs"></span>
<span class="$$loading $$loading-infinity $$loading-sm"></span>
<span class="$$loading $$loading-infinity $$loading-md"></span>
<span class="$$loading $$loading-infinity $$loading-lg"></span>
<span class="$$loading $$loading-infinity $$loading-xl"></span>

<span class="$$loading $$loading-infinity $$loading-xs"></span>
<span class="$$loading $$loading-infinity $$loading-sm"></span>
<span class="$$loading $$loading-infinity $$loading-md"></span>
<span class="$$loading $$loading-infinity $$loading-lg"></span>
<span class="$$loading $$loading-infinity $$loading-xl"></span>

            
                <span class="$$loading $$loading-infinity $$loading-xs"></span>
<span class="$$loading $$loading-infinity $$loading-sm"></span>
<span class="$$loading $$loading-infinity $$loading-md"></span>
<span class="$$loading $$loading-infinity $$loading-lg"></span>
<span class="$$loading $$loading-infinity $$loading-xl"></span>

<span class="$$loading $$loading-infinity $$loading-xs"></span>
<span class="$$loading $$loading-infinity $$loading-sm"></span>
<span class="$$loading $$loading-infinity $$loading-md"></span>
<span class="$$loading $$loading-infinity $$loading-lg"></span>
<span class="$$loading $$loading-infinity $$loading-xl"></span>

带颜色的加载中

<span class="$$loading $$loading-spinner text-primary"></span>
<span class="$$loading $$loading-spinner text-secondary"></span>
<span class="$$loading $$loading-spinner text-accent"></span>
<span class="$$loading $$loading-spinner text-neutral"></span>
<span class="$$loading $$loading-spinner text-info"></span>
<span class="$$loading $$loading-spinner text-success"></span>
<span class="$$loading $$loading-spinner text-warning"></span>
<span class="$$loading $$loading-spinner text-error"></span>

<span class="$$loading $$loading-spinner text-primary"></span>
<span class="$$loading $$loading-spinner text-secondary"></span>
<span class="$$loading $$loading-spinner text-accent"></span>
<span class="$$loading $$loading-spinner text-neutral"></span>
<span class="$$loading $$loading-spinner text-info"></span>
<span class="$$loading $$loading-spinner text-success"></span>
<span class="$$loading $$loading-spinner text-warning"></span>
<span class="$$loading $$loading-spinner text-error"></span>

            
                <span class="$$loading $$loading-spinner text-primary"></span>
<span class="$$loading $$loading-spinner text-secondary"></span>
<span class="$$loading $$loading-spinner text-accent"></span>
<span class="$$loading $$loading-spinner text-neutral"></span>
<span class="$$loading $$loading-spinner text-info"></span>
<span class="$$loading $$loading-spinner text-success"></span>
<span class="$$loading $$loading-spinner text-warning"></span>
<span class="$$loading $$loading-spinner text-error"></span>

<span class="$$loading $$loading-spinner text-primary"></span>
<span class="$$loading $$loading-spinner text-secondary"></span>
<span class="$$loading $$loading-spinner text-accent"></span>
<span class="$$loading $$loading-spinner text-neutral"></span>
<span class="$$loading $$loading-spinner text-info"></span>
<span class="$$loading $$loading-spinner text-success"></span>
<span class="$$loading $$loading-spinner text-warning"></span>
<span class="$$loading $$loading-spinner text-error"></span>