https://github.com/iamriajul/qwik-content-loader
⚪ SVG-Powered component to easily create skeleton loadings.
https://github.com/iamriajul/qwik-content-loader
content facebook-cards-loaders loader loading placeholder qwik shimmer skeleton svg
Last synced: 2 months ago
JSON representation
⚪ SVG-Powered component to easily create skeleton loadings.
- Host: GitHub
- URL: https://github.com/iamriajul/qwik-content-loader
- Owner: iamriajul
- Created: 2023-10-07T05:20:59.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-19T12:21:37.000Z (over 1 year ago)
- Last Synced: 2025-02-24T21:06:21.862Z (3 months ago)
- Topics: content, facebook-cards-loaders, loader, loading, placeholder, qwik, shimmer, skeleton, svg
- Language: TypeScript
- Homepage: https://skeletonreact.com
- Size: 126 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Qwik-Content-Loader
### Ported from [React-Content-Loader](https://github.com/danilowoz/react-content-loader)
SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
## Features
- :gear: **Customizable:** Feel free to change the colors, speed, sizes, and even **RTL**;
- :ok_hand: **Plug and play:** with many presets to use, see the [examples](http://danilowoz.com/create-content-loader/#gallery);
- :pencil2: **DIY:** use the [create-content-loader](https://danilowoz.com/create-content-loader) to create your own custom loaders easily;
- ⚛️ **Really lightweight:** no runtime! **0 dependencies**;
## Index
- [Getting Started](#gettingstarted)
- [Usage](#usage)
- [Options](#options)
- [Examples](#examples)
- [Troubleshooting](#troubleshooting)
- [Similar packages](#similarpackages)
- [Development](#development)
## Getting Started
```sh
pnpm i qwik-content-loader
```
```sh
npm i qwik-content-loader --save
```
```sh
yarn add qwik-content-loader
```
CDN from [JSDELIVR](https://www.jsdelivr.com/package/npm/qwik-content-loader)
## Usage
There are two ways to use it:
**1. Presets, see the [examples](https://danilowoz.com/react-content-loader/):**
```jsx
import { ContentLoader, ContentLoaderFacebook } from 'qwik-content-loader'
const MyLoader = () =>
const MyFacebookLoader = () =>
```
**2. Custom mode, see the [online tool](https://danilowoz.com/create-content-loader)**
```jsx
const MyLoader = () => (
{/* Only SVG shapes */}
)
```
(React version Demo:)
**Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)
Or try the components editable demo hands-on and install it from [bit.dev](https://bit.dev/danilowoz/react-content-loader)
## Options
|
Prop name and type | Description |
|------------------------------------------------------------------| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`animate?: boolean`**
Defaults to `true` | Opt-out of animations with `false` |
| **`title?: string`**
Defaults to `Loading...` | It's used to describe what element it is.
Use `''` (empty string) to remove. |
| **`baseUrl?: string`**
Defaults to an empty string | Required if you're using `` document `