跳转到主内容
Frutjam logo Frutjam
v2.2.2
Theme

加载组件

最后更新:

纯 CSS Tailwind CSS 加载指示器，带有旋转器、点、环和条形动画。颜色和尺寸变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

加载组件在获取或处理内容时显示视觉指示器，让用户了解情况并防止感知延迟。加载旋转器采用语义 HTML 和流畅的 CSS 动画构建，可传达活动的后台操作。 Frutjam 加载系统支持多种样式、颜色和尺寸，非常适合数据表、文件上传、表单提交和异步操作。

仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

班级 类型 描述
loading根据旋转环指示器，默认继承文本颜色
loading-dots风格三个脉冲点
loading-bars风格三个动画垂直条
loading-xs尺寸特小号（1rem）
loading-sm尺寸小 (1.25rem)
loading-md尺寸中（1.5rem，默认）
loading-lg尺寸大 (2rem)
loading-xl尺寸超大 (2.5rem)
loading-base颜色柔和的基面颜色
loading-current颜色显式继承当前文本颜色
loading-primary颜色主要主题颜色
loading-secondary颜色次要主题色
loading-accent颜色强调主题颜色
loading-neutral颜色中性主题色
loading-info颜色信息语义颜色
loading-success颜色成功语义色
loading-warning颜色警告语义颜色
loading-error颜色错误语义颜色

基本用法

<span class="loading"></span>

<span className="loading"></span>

<span class="loading"></span>

加载样式

html 
1
2
3
<span class="loading"></span>
<span class="loading loading-dots"></span>
<span class="loading loading-bars"></span>

装载尺寸

html 
1
2
3
4
5
<span class="loading loading-xs"></span>
<span class="loading loading-sm"></span>
<span class="loading loading-md"></span>
<span class="loading loading-lg"></span>
<span class="loading loading-xl"></span>

加载颜色

html 
1
2
3
4
5
6
7
8
9
<span class="loading loading-base"></span>
<span class="loading loading-primary"></span>
<span class="loading loading-secondary"></span>
<span class="loading loading-accent"></span>
<span class="loading loading-info"></span>
<span class="loading loading-success"></span>
<span class="loading loading-warning"></span>
<span class="loading loading-error"></span>
<span class="loading loading-neutral"></span>

加载当前颜色

html 
1
2
3
4
5
6
7
8
<p class="text-primary flex items-center gap-2">
  <span class="loading loading-sm"></span>
  Inherits primary text color
</p>
<p class="text-error flex items-center gap-2">
  <span class="loading loading-sm"></span>
  Inherits error text color
</p>

加载按钮

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<button class="btn gap-2">
  <span class="loading loading-sm"></span>
  Loading
</button>

<button class="btn btn-primary gap-2">
  <span class="loading loading-sm loading-current"></span>
  Processing
</button>

<button class="btn btn-error gap-2">
  <span class="loading loading-sm loading-current"></span>
  Deleting
</button>

加载状态

html 
1
2
3
4
5
6
7
8
9
<div class="card card-outline w-96">
  <div class="card-content">
    <h3 class="card-title">Loading Data</h3>
    <div class="flex items-center gap-2">
      <span class="loading loading-md"></span>
      <span>Fetching information...</span>
    </div>
  </div>
</div>