图标
推荐使用
tailwindcss,unocss等 CSS 工具,更有利于个性化定制 UI 和按需构建最小化 CSS 文件。
默认样式文件中的 CSS 图标类:内置若干常用 CSS 图标。
CSSclose
类名: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 );}