- Notifications
You must be signed in to change notification settings - Fork175
greyby/vue-spinner
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Not support Vue 2.0.
A collection of loading spinners with Vue.js. Just convert yuanyan's React.js projectHalogen to Vue.js components. Special thanks toyuanyan for the wonderful project.
$ npm install vue-spinner
varPulseLoader=require('vue-spinner/src/PulseLoader.vue');newVue({components:{'PulseLoader':PulseLoader}})
importPulseLoaderfrom'vue-spinner/src/PulseLoader.vue'newVue({components:{ PulseLoader}})
Or:
Vue.component('pulse-loader',require('vue-spinner/src/PulseLoader.vue'));
If you use browserify + vueify, you may need to import vue-spinner like this:
varPulseLoader=require('vue-spinner/dist/vue-spinner.min').PulseLoader;
import{PulseLoader}from'vue-spinner/dist/vue-spinner.min.js'
Thedist folder containsvue-spinner.js andvue-spinner.min.js with all components exported in thewindow.VueSpinner object. These bundles are also available on NPM packages.
<scriptsrc="path/to/vue.js"></script><scriptsrc="path/to/vue-spinner.js"></script><script>varPulseLoader=VueSpinner.PulseLoader</script>
npm installnpm run dev<pulse-loader:loading="loading":color="color":size="size"></pulse-loader><grid-loader:loading="loading":color="color":size="size"></grid-loader><clip-loader:loading="loading":color="color":size="size"></clip-loader><rise-loader:loading="loading":color="color":size="size"></rise-loader><beat-loader:loading="loading":color="color":size="size"></beat-loader><sync-loader:loading="loading":color="color":size="size"></sync-loader><rotate-loader:loading="loading":color="color":size="size"></rotate-loader><fade-loader:loading="loading":color="color":height="height":width="width"></fade-loader><pacman-loader:loading="loading":color="color":size="size"></pacman-loader><square-loader:loading="loading":color="color":size="size"></square-loader><scale-loader:loading="loading":color="color":height="height":width="width"></scale-loader><skew-loader:loading="loading":color="color":size="size"></skew-loader><moon-loader:loading="loading":color="color":size="size"></moon-loader><ring-loader:loading="loading":color="color":size="size"></ring-loader><bounce-loader:loading="loading":color="color":size="size"></bounce-loader><dot-loader:loading="loading":color="color":size="size"></dot-loader>
You can customize the color and size with setting the props. All props have default value. You can control the spinner show/hidden with setting the loading prop.
vue-spinner is licensed underThe MIT License.