vue-content-placeholders

Vue Components for rendering animated content placeholders like facebook

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-content-placeholders
1,586140.2.15 years ago5 years agoMinified + gzip package size for vue-content-placeholders in KB

Readme

vue-content-placeholders
npm vue2
Vue addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.

example

:cd: Installation

  • via npm: npm install vue-content-placeholders --save
  • via yarn: yarn add vue-content-placeholders

:rocket: Usage

Include plugin in your main.js file.
import Vue from 'vue'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(VueContentPlaceholders)

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

Examples:

<content-placeholders>
  <content-placeholders-heading :img="true" />
  <content-placeholders-text :lines="3" />
</content-placeholders>

rendered example
<content-placeholders :rounded="true">
  <content-placeholders-img />
  <content-placeholders-heading />
</content-placeholders>

rendered example

Available components and properties

  • root <content-placeholders>
Boolean animated (default: true) Boolean rounded (default: false) - border radius Boolean centered (default: false) > these properties define how all children components will act
  • <content-placeholders-heading />
Boolean img (default: false)
  • <content-placeholders-text />
Number lines (default: 4)
  • <content-placeholders-img />

🔓 License

See the LICENSE
file for license rights and limitations (MIT).