Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/vue-content-loader
SVG component to create placeholder loading, like Facebook cards loading.
https://github.com/egoist/vue-content-loader
component loading placeholder svg vue
Last synced: 20 days ago
JSON representation
SVG component to create placeholder loading, like Facebook cards loading.
- Host: GitHub
- URL: https://github.com/egoist/vue-content-loader
- Owner: egoist
- Created: 2018-03-21T13:39:59.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-23T12:25:19.000Z (8 months ago)
- Last Synced: 2024-10-01T16:42:42.111Z (about 1 month ago)
- Topics: component, loading, placeholder, svg, vue
- Language: JavaScript
- Homepage: https://create-content-loader.now.sh/
- Size: 1.78 MB
- Stars: 3,040
- Watchers: 26
- Forks: 139
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome - egoist/vue-content-loader - SVG component to create placeholder loading, like Facebook cards loading. (JavaScript)
- awesome-github-star - vue-content-loader
README
# vue-content-loader
[](https://npmjs.com/package/vue-content-loader) [](https://npmjs.com/package/vue-content-loader) [](https://circleci.com/gh/egoist/vue-content-loader/tree/master)
SVG component to create placeholder loading, like Facebook cards loading.
## Features
This is a Vue port for [react-content-loader](https://github.com/danilowoz/react-content-loader).
- Completely customizable: you can change the colors, speed and sizes.
- Create your own loading: use the [online tool](https://create-content-loader.now.sh/) to create your custom loader easily.
- You can use it right now: there are a lot of presets already.
- Performance:
- Tree-shakable and highly optimized bundle.
- Pure SVG, so it's works without any javascript, canvas, etc.
- Pure functional components.
## Install
⚠️ **The latest version is compatible with Vue 3 only.** For Vue 2 & Nuxt 2, use `vue-content-loader@^0.2` instead.
With npm:
```bash
npm i vue-content-loader
```
Or with yarn:
```bash
yarn add vue-content-loader
```
CDN: [UNPKG](https://unpkg.com/vue-content-loader/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-content-loader/) (available as `window.contentLoaders`)
## Usage
👀👉 Demo: [CodeSandbox](https://codesandbox.io/s/vue-content-loader-igfyf?file=/src/App.vue)
```vue
import { ContentLoader } from 'vue-content-loader'
export default {
components: {
ContentLoader,
},
}
```
### Built-in loaders
```js
import {
ContentLoader,
FacebookLoader,
CodeLoader,
BulletListLoader,
InstagramLoader,
ListLoader,
} from 'vue-content-loader'
```
`ContentLoader` is a meta loader while other loaders are just higher-order components of it. By default `ContentLoader` only displays a simple rectangle, here's how you can use it to create custom loaders:
```vue
```
This is also how [ListLoader](./src/ListLoader.js) is created.
You can also use the [online tool](http://danilowoz.com/create-vue-content-loader/) to create shapes for your custom loader.
## API
### Props
| Prop | Type | Default | Description |
| ------------------- | -------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| width | number, string | | SVG width in pixels without unit |
| height | number, string | | SVG height in pixels without unit |
| viewBox | string | `'0 0 ${width ?? 400} ${height ?? 130}'` | See [SVG viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) attribute |
| preserveAspectRatio | string | `'xMidYMid meet'` | See [SVG preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) attribute |
| speed | number | `2` | Animation speed |
| primaryColor | string | `'#f9f9f9'` | Background color |
| secondaryColor | string | `'#ecebeb'` | Highlight color |
| uniqueKey | string | `randomId()` | Unique ID, you need to make it consistent for SSR |
| animate | boolean | `true` | |
| baseUrl | string | empty string | Required if you're using `` in your `