https://github.com/iapyang/vue-simple-loading

Fork styles from tobiasahlin/SpinKit and built it for vue.
https://github.com/iapyang/vue-simple-loading

css3-animations vue-component vuejs2

Last synced: about 2 months ago
JSON representation

Fork styles from tobiasahlin/SpinKit and built it for vue.

• Host: GitHub
• URL: https://github.com/iapyang/vue-simple-loading
• Owner: iapYang
• Created: 2017-03-03T06:35:27.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-24T01:24:51.000Z (over 7 years ago)
• Last Synced: 2025-04-19T00:47:37.302Z (2 months ago)
• Topics: css3-animations, vue-component, vuejs2
• Language: JavaScript
• Homepage: https://iapyang.github.io/vue-simple-loading/
• Size: 425 KB
• Stars: 14
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


[![GitHub issues](https://img.shields.io/github/issues/iapYang/vue-simple-loading.svg?style=flat-square)](https://github.com/iapYang/vue-simple-loading/issues)

[![GitHub forks](https://img.shields.io/github/forks/iapYang/vue-simple-loading.svg?style=flat-square)](https://github.com/iapYang/vue-simple-loading/network)

[![GitHub stars](https://img.shields.io/github/stars/iapYang/vue-simple-loading.svg?style=flat-square)](https://github.com/iapYang/vue-simple-loading/stargazers)

[![npm](https://img.shields.io/npm/dt/vue-simple-loading.svg?style=flat)](https://www.npmjs.com/package/vue-simple-loading)

[![NPM](https://nodei.co/npm/vue-simple-loading.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-simple-loading/)

# vue-simple-loading

Thanks for [tobiasahlin/SpinKit](https://github.com/tobiasahlin/SpinKit). The css3 animation is copied from it.

All the things I do is built it as a vue component.

This project is built by vue 2.2.1, so you should update vue to at least version 2.

## Changelog

> v1.1.5 add props validator

## Usage

### NPM

`npm install 'vue-simple-loading' -D ` 

### Import

In your .vue files, use follow code to include it

`import VueLoading from 'vue-simple-loading';`

Add it to components

```javascript

components: {

  VueLoading,

},

```

Add it to the dom

``

### Add spinner props

The loading style is defined by spinner.

For now, there are 11 styles of loading.

```javascript

spinners: [

  'rotating-plane',

  'double-bounce',

  'wave',

  'wandering-cubes',

  'pulse',

  'chasing-dots',

  'three-bounce',

  'circles',

  'cube-grid',

  'fading-circle',

  'folding-cube'

],

```

[Check it](https://iapyang.github.io/vue-simple-loading/)

Add the 'spinner' prop, e.g.

``

​