!solidjs card

!NPM
!package bundle size
!package version
!npm downloads

Light and customizable Solid component to create skeleton screens that automatically adapt to your app!

Quick start

Install it:

``bash
npm i solid-marquee

or

yarn add solid-marquee

or

pnpm add solid-marquee
`

Usage

`tsx
import Skeleton from "solid-loading-skeleton"
import "solid-loading-skeleton/dist/skeleton.css"

const App = () => {
return (
// A simple, single-line loading skeleton
// Fie-line loading skeleton
)
}
`

Principles

$3

The Skeleton component should be used directly in your components in place of content that is loading. While other libraries require you to meticulously craft a skeleton screen that matches the font size, line height, and margins of your content, the Skeleton component is automatically sized to the correct dimensions.

For example:

`jsx
const BlogPost = (props) => {
return(

{props.title || }

{props.body || }

)
}
`

...will produce correctly-sized skeletons for the heading and body without any further configuration.

This ensures the loading state remains up-to-date with any changes to your layout or typography.

$3

Instead, make components with built-in skeleton states.

This approach is beneficial because:

1. It keeps styles in sync.
2. Components should represent all possible states — loading included.
3. It allows for more flexible loading patterns. In the blog post example above, it's possible to have the title load before the body, while having both pieces of content show loading skeletons at the right time.

Theming

Customize individual skeletons with props, or render a SkeletonTheme to style all skeletons below it in the React hierarchy:

`jsx
import Skeleton, { SkeletonTheme } from "solid-loading-skeleton";

return (

);
``

Props Reference

$3

Prop	Description	Default
count?: number	The number of lines of skeletons to render. If count is a decimal number like 3.5, three full skeletons and one half-width skeleton will be rendered.	1
wrapper?: (props: any) => JSXElement	A custom wrapper component that goes around the individual skeleton elements.
circle?: boolean	Makes the skeleton circular by setting border-radius to 50%.	false
className?: string	A custom class name for the individual skeleton elements which is used alongside the default class, solid-loading-skeleton.
containerClassName?: string	A custom class name for the <span> that wraps the individual skeleton elements.
style?: JSX.CSSProperties	This is an escape hatch for advanced use cases and is not the preferred way to style the skeleton. Props (e.g. width, borderRadius) take priority over this style object.

$3

Prop	Description	Default
baseColor?: string	The background color of the skeleton.	#ebebeb
highlightColor?: string	The highlight color in the skeleton animation.	#f5f5f5
width?: string | number	The width of the skeleton.	100%
height?: string | number	The height of each skeleton line.	The font size
borderRadius?: string | number	The border radius of the skeleton.	0.25rem
inline?: boolean	By default, a <br /> is inserted after each skeleton so that each skeleton gets its own line. When inline is true, no line breaks are inserted.	false
duration?: number	The length of the animation in seconds.	1.5
direction?: "base" | "alternate" | "reverse" | "alternate-reverse"	The direction of the animation, either left-to-right or right-to-left.	"base"
enableAnimation?: boolean	Whether the animation should play. The skeleton will be a solid color when this is false. You could use this prop to stop the animation if an error occurs.	true

Contributors


Licence

MIT