图标

推荐使用 tailwindcss, unocss 等 CSS 工具,更有利于个性化定制 UI 和按需构建最小化 CSS 文件。

默认样式文件中的 CSS 图标类:内置若干常用 CSS 图标。

CSS

close

类名:icon-close

用在按钮等元素中:

loader

基础 DOM 结构:

HTML
<div class="j-loader"> <div class="{loader-type}"></div></div>

loader

HTML
<div class="j-loader"> <div class="loader"></div></div>

polygon-loader

HTML
<div class="j-loader"> <div class="polygon-loader"></div></div>

tone-loader

HTML
<div class="j-loader"> <div class="tone-loader"></div></div>

flow-loader

HTML
<div class="j-loader"> <div class="flow-loader"></div></div>

自定义样式

通过 CSS 变量控制 CSS Loader 样式,默认值如下:

CSS
.j-loader { --loader-size: var(--font-size-md); --loader-width: 1.5px; --loader-style: solid; --loader-fg: currentcolor; --loader-speed: var(--speed-xl);}.j-loader .tone-loader { --loader-width: 2px; --loader-fg: var(--tone-soft); --loader-top-fg: var(--tone-solid);}.j-loader .flow-loader { --loader-width: 2px; --loader-bg: radial-gradient(farthest-side, var(--tone-solid) 94%, #0000) top/var(--loader-width) var(--loader-width) no-repeat, conic-gradient(#0000 30%, var(--tone-solid)); --loader-mask: radial-gradient( farthest-side, #0000 calc(100% - var(--loader-width)), #000 0 );}
最后更新于 2026-09-22 16:24:09 UTC+8