frutjam
Version:
A utility-first CSS UI Library for Tailwind CSS
2 lines (1 loc) • 3.11 kB
JavaScript
export default {".loading":{"--loading--size":"1.5rem","--loading--color":"currentColor","--loading--thickness":"2px","display":"inline-block","width":"var(--loading--size)","height":"var(--loading--size)","border-radius":"9999px","border-width":"var(--loading--thickness)","border-style":"solid","border-color":"var(--loading--color)","@supports (color: color-mix(in lab, red, red))":{"border-color":"color-mix(in oklab, var(--loading--color) 25%, transparent)"},"border-top-color":"var(--loading--color)","animation":"loading-spin 700ms linear infinite","flex-shrink":0,"vertical-align":"middle"},".loading-bars":{"--loading--size":"0.25rem","--loading--color":"var(--color-primary)","display":"inline-flex","gap":"calc(var(--loading--size) * 0.75)","align-items":"flex-end","height":"calc(var(--loading--size) * 5)","border-radius":"0","border":"none","animation":"none","background":"transparent","width":"auto","&::before,\n &::after":{"content":"\"\"","display":"block","width":"var(--loading--size)","background-color":"var(--loading--color)","border-radius":"2px","animation":"loading-bars 1s ease-in-out infinite"},"&::before":{"height":"60%","animation-delay":"-0.15s"},"&::after":{"height":"100%","animation-delay":"0s"}},".loading-dots":{"--loading--size":"0.5rem","--loading--color":"var(--color-primary)","display":"inline-flex","gap":"calc(var(--loading--size) * 0.5)","align-items":"center","border-radius":"0","border":"none","animation":"none","background":"transparent","width":"auto","height":"auto","&::before,\n &::after":{"content":"\"\"","display":"block","width":"var(--loading--size)","height":"var(--loading--size)","border-radius":"9999px","background-color":"var(--loading--color)","animation":"loading-pulse 1s ease-in-out infinite"},"&::before":{"animation-delay":"-0.32s"},"&::after":{"animation-delay":"0s"}},".loading-lg":{"--loading--size":"2rem","--loading--thickness":"2.5px"},".loading-md":{"--loading--size":"1.5rem","--loading--thickness":"2px"},".loading-sm":{"--loading--size":"1.25rem","--loading--thickness":"2px"},".loading-xl":{"--loading--size":"2.5rem","--loading--thickness":"3px"},".loading-xs":{"--loading--size":"1rem","--loading--thickness":"1.5px"},".loading-accent":{"--loading--color":"var(--color-accent)"},".loading-base":{"--loading--color":"var(--color-base-active)"},".loading-current":{"--loading--color":"currentColor"},".loading-error":{"--loading--color":"var(--color-error)"},".loading-info":{"--loading--color":"var(--color-info)"},".loading-neutral":{"--loading--color":"var(--color-neutral)"},".loading-primary":{"--loading--color":"var(--color-primary)"},".loading-secondary":{"--loading--color":"var(--color-secondary)"},".loading-success":{"--loading--color":"var(--color-success)"},".loading-warning":{"--loading--color":"var(--color-warning)"},"@keyframes loading-spin":{"to":{"transform":"rotate(360deg)"}},"@keyframes loading-pulse":{"0%, 80%, 100%":{"transform":"scale(0.6)","opacity":0.5},"40%":{"transform":"scale(1)","opacity":1}},"@keyframes loading-bars":{"0%, 100%":{"transform":"scaleY(0.4)"},"50%":{"transform":"scaleY(1)"}}};