Skip to content

pwndex/vuespins

Repository files navigation



logo




NPM Version Vue Version Build Status Coverage Status NPM Downloads
Minified Size Tree Shaking MIT License


Installation

Demo

Browse components and explore their props with Docs

Prerequisites

Quick Start

To install it, open up your terminal and run

npm install vuespins
# or yarn - whichever you prefer
yarn add vuespins

Usage

Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="/node_modules/vuespins/dist/vuespins.min.js"></script>

<!-- CDN -->
<script src="https://unpkg.com/vuespins@latest/dist/vuespins.min.js"></script>

Bundler (Webpack, Rollup)

import Vue from 'vue'
import Vuespins from 'vuespins'

Vue.use(Vuespins)

How to use it?

After above steps, simply use any spinners in your Vue components

<template>
  <div>
    // Basic Ring Spinner
    <Ring />

    // Custom Ring Spinner
    <Ring
      color="custom color"
      :size="custom size"
      :thickness="custom thickness"
    />
  </div>
</template>

Or you can import any spinner to your liking

<template>
  <div>
    // Basic Ring Spinner
    <CubeGrid />

    // Custom Ring Spinner
    <CubeGrid color="custom color" :size="custom size" />
  </div>
</template>
<script>
import { CubeGrid } from 'vuespins'

export default {
  name: 'app',
  components: {
    CubeGrid
  }
}
</script>

Examples

You will find further demos under /examples folder

Contributing

  1. Fork it
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m "feat: add some feature"
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

Copyright

MIT Licensed | Copyright © 2020 Amal' Greenberg