Giter VIP home page Giter VIP logo

vue-content-loading's Introduction

Vue Content Loading

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Inspired in React Content Loader

Installation

Simple install it via NPM

$ npm install vue-content-loading --save

So how it looks like?

Facebook

Facebook loading

Code

Code loading

See more here

Usage

Presets
  import { VclFacebook, VclInstagram } from 'vue-content-loading';

  <vcl-facebook></vcl-facebook>

  <vcl-instagram></vcl-instagram>

You can bind custom attrs to presets too xd

Custom
  import VueContentLoading from 'vue-content-loading';

  <vue-content-loading :width="300" :height="100">
    <circle cx="30" cy="30" r="30" />
    <rect x="75" y="13" rx="4" ry="4" width="100" height="15" />
    <rect x="75" y="37" rx="4" ry="4" width="50" height="10" />
  </vue-content-loading>

The default loading is facebook

Options

Props

Prop Type Default Description
speed Number 2 Animation speed
width Number 400 Width component
height Number 150 Height component
primary String #f0f0f0 Background the SVG
secondary String #e0e0e0 Animation color

Colors props are required to be HEX with hash prefix.

Props are validate, so it minimize mistakes xd

Supported presets

  • Code (VclCode)
  • List (VclList)
  • Facebook (VclFacebook)
  • Instagram (VclInstagram)

Development

Linting

$ npm run lint

To automatically fix the problems, run

$ npm run lint:fix

License

MIT

vue-content-loading's People

Watchers

avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.