Icons

CSS tools such as tailwindcss and unocss are recommended. They make UI customization easier and help build smaller CSS files on demand.

CSS icon classes in the default stylesheet. Several common CSS icons are included.

close

Class name: icon-close

Use it in buttons and similar elements:

loader

Basic DOM structure:

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>

Custom Styles

Control CSS Loader styles with CSS variables. Default values:

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  );}