| 1 | # vue-content-loader
|
| 2 |
|
| 3 | [](https://npmjs.com/package/vue-content-loader) [](https://npmjs.com/package/vue-content-loader) [](https://circleci.com/gh/egoist/vue-content-loader/tree/master)
|
| 4 |
|
| 5 | SVG component to create placeholder loading, like Facebook cards loading.
|
| 6 |
|
| 7 | 
|
| 8 |
|
| 9 | ## Features
|
| 10 |
|
| 11 | This is a Vue port for [react-content-loader](https://github.com/danilowoz/react-content-loader).
|
| 12 |
|
| 13 | - Completely customizable: you can change the colors, speed and sizes.
|
| 14 | - Create your own loading: use the [online tool](http://danilowoz.com/create-vue-content-loader/ ) to create your custom loader easily.
|
| 15 | - You can use it right now: there are a lot of presets already.
|
| 16 | - Performance:
|
| 17 | - Tree-shakable and highly optimized bundle.
|
| 18 | - Pure SVG, so it's works without any javascript, canvas, etc.
|
| 19 | - Pure functional components.
|
| 20 |
|
| 21 | ## Install
|
| 22 |
|
| 23 | ```bash
|
| 24 | yarn add vue-content-loader
|
| 25 | ```
|
| 26 |
|
| 27 | CDN: [UNPKG](https://unpkg.com/vue-content-loader/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-content-loader/) (available as `window.contentLoaders`)
|
| 28 |
|
| 29 | ## Usage
|
| 30 |
|
| 31 | 👀👉 Demos: [Storybook](https://vue-content-loader.egoist.moe) | [with Nuxt.js](https://glitch.com/edit/#!/vue-content-loader)
|
| 32 |
|
| 33 | ```vue
|
| 34 | <template>
|
| 35 | <content-loader></content-loader>
|
| 36 | </template>
|
| 37 |
|
| 38 | <script>
|
| 39 | import { ContentLoader } from 'vue-content-loader'
|
| 40 |
|
| 41 | export default {
|
| 42 | components: {
|
| 43 | ContentLoader
|
| 44 | }
|
| 45 | }
|
| 46 | </script>
|
| 47 | ```
|
| 48 |
|
| 49 | ### Built-in loaders
|
| 50 |
|
| 51 | ```js
|
| 52 | import {
|
| 53 | ContentLoader,
|
| 54 | FacebookLoader,
|
| 55 | CodeLoader,
|
| 56 | BulletListLoader,
|
| 57 | InstagramLoader,
|
| 58 | ListLoader
|
| 59 | } from 'vue-content-loader'
|
| 60 | ```
|
| 61 |
|
| 62 | `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:
|
| 63 |
|
| 64 | ```vue
|
| 65 | <ContentLoader>
|
| 66 | <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
|
| 67 | <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
|
| 68 | <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
|
| 69 | <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
|
| 70 | <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
|
| 71 | <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
|
| 72 | </ContentLoader>
|
| 73 | ```
|
| 74 |
|
| 75 | This is also how [ListLoader](./src/ListLoader.js) is created.
|
| 76 |
|
| 77 | You can also use the [online tool](http://danilowoz.com/create-vue-content-loader/ ) to create shapes for your custom loader.
|
| 78 |
|
| 79 | ## API
|
| 80 |
|
| 81 | ### Props
|
| 82 |
|
| 83 |
|
| 84 | |Prop|Type|Default|Description|
|
| 85 | |---|---|---|---|
|
| 86 | |width|number|`400`||
|
| 87 | |height|number|`130`||
|
| 88 | |speed|number|`2`||
|
| 89 | |preserveAspectRatio|string|`'xMidYMid meet'`||
|
| 90 | |primaryColor|string|`'#f9f9f9'`||
|
| 91 | |secondaryColor|string|`'#ecebeb'`||
|
| 92 | |uniqueKey|string|`randomId()`|Unique ID, you need to make it consistent for SSR|
|
| 93 | |animate|boolean|`true`||
|
| 94 | |baseUrl|string|empty string|Required if you're using `<base url="/" />` in your `<head />`. Defaults to an empty string. This prop is common used as: `<content-loader :base-url="$route.fullPath" />` which will fill the SVG attribute with the relative path. Related [#14](https://github.com/egoist/vue-content-loader/issues/14).|
|
| 95 | |primaryOpacity|number|`1`|Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari|
|
| 96 | |secondaryOpacity|number|`1`|Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari|
|
| 97 |
|
| 98 |
|
| 99 | ## Credits
|
| 100 |
|
| 101 | This is basically a Vue port for [react-content-loader](https://github.com/danilowoz/react-content-loader).
|
| 102 |
|
| 103 | [Thanks to @alidcastano for transferring the package name to me.](https://github.com/egoist/vue-content-loader/issues/1) 😘
|
| 104 |
|
| 105 | ## License
|
| 106 |
|
| 107 | MIT © [EGOIST](https://github.com/egoist)
|