dzwillia / vue-simple-spinner Goto Github PK

View Code? Open in Web Editor NEW

426.0 7.0 35.0 430 KB

A simple, flexible spinner for Vue.js

Home Page: https://dzwillia.github.io/vue-simple-spinner/examples

License: MIT License

JavaScript 18.91% Vue 73.88% Batchfile 1.20% HTML 6.01%

vue vuejs ui component spinner progress

vue-simple-spinner's Introduction

vue-simple-spinner

A simple, flexible spinner for Vue.js

vue-simple-spinner is designed to be a lightweight Vue.js spinner requiring minimal configuration.

Documentation

https://github.com/dzwillia/vue-simple-spinner/

Demo

https://dzwillia.github.io/vue-simple-spinner/examples

Requirements

Vue.js (^v2.1.4)

Browser support

IE 10+ (due to CSS animation support).

Installation

NPM

npm install vue-simple-spinner --save

Usage

All styling for this component is done via computed styles in the Spinner.vue component and requires no external CSS files.

ES6

The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.

import Vue from 'vue'
import Spinner from 'vue-simple-spinner'

new Vue({
  components: {
    Spinner
  }
})

Globals (script tag)

Add a script tag pointing to dist/vue-simple-spinner.min.js after adding Vue.

Example:

<html>
<head>
  ...
</head>
<body>
  <div id="app">
    <vue-simple-spinner></vue-simple-spinner>
  </div>

  <script src="path/to/vue.js"></script>
  <script src="path/to/vue-simple-spinner.js"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

Examples

Medium size

<vue-simple-spinner size="medium" />

Custom line color

<vue-simple-spinner line-fg-color="#009900" />

Custom font size and message

<vue-simple-spinner spacing="55" message="I'm 55px below the vue-simple-spinner" />

More live code examples on JSFiddle

Options

Props	Type	Values	Default
size	Number \| String	tiny, small, medium, large, huge, massive, {n}	32
line-size	Number	Any Number	3
line-bg-color	String	Color	#eee
line-fg-color	String	Color	#2196f3
speed	Number	Number (in seconds)	0.8
spacing	Number	Number (in pixels)	4
message	String	Text to display	(empty string)
font-size	Number	Number (in pixels)	13
text-fg-color	String	Color	#555

License

vue-simple-spinner is open source and released under the MIT License.

PS: I would love to know if you're using vue-simple-spinner. Tweet to me at @padredaveo.

vue-simple-spinner's People

Contributors

Stargazers

Watchers

vue-simple-spinner's Issues

npm ERR! asyncWrite is not a function

I tried to install vue-simple-loader with 'npm install vue-simple-loader --save' and got the following error messages:

npm ERR! asyncWrite is not a function
npm ERR! pna.nextTick is not a function

My environment is the following, copied from .npm/ debug log file:
Linux 4.15.0-36-generic
argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "vue-simple-spinner" "--save"
verbose node v8.12.0
verbose npm v6.4.1

It seems this was a node / npm issue, occuring when switching node versions with n, and has nothing to do with the component package

Please add typings for use in Vue+Typescript

It would be awesome if this included typings for use with Vue+Typescript

Is there some dependency missing?

error: Cannot find module '!!../../node_modules/css-loader/index.js!../../node_modules/vue-loader/lib/style-compiler/index.js?{"id":"data-v-f8f101d2","scoped":false,"hasInlineConfig":true}!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./Spinner.vue' from **

some advices

hello! your spinner is great and easy to use, good job! but i think it can be better.

i can't find the API in the document. i had to look up the source code to find out what they are. i think we should write it down.
i saw we had used style on the spinner, i think we should use class. you know, almost every time, the third party framework do not meet our requirement. we always need to give it some new style by class or style. but if we using style by style, we can not cover your style by a easy way. so i think change to using class will be more user friendly.

Add .babelrc to .npmignore

Hi!
Thanks for great spinner :)

Please, add .babelrc to .npmignore file (and maybe some other, like /examples/ and /build/, that not needed in end package). Because according to babel lookup behaviour I can't include component directly if I haven't installed some babel plugins listed in .babelrc of this package.

Some example:
If I try do this:
import Spinner from 'vue-simple-spinner/src/components/Spinner.vue';
and in my app not installed babel plugin "transform-object-rest-spread" I will get error "Unknown plugin "transform-object-rest-spread" specified in ..."

Not compatible with server rendering

The way the dist bundles are currently built, they only work when you add them directly to your html via a script tag, but not when you require from a common js driven application.

import SimpleSpinner from 'vue-simple-spinner' points to the dist/vue-simple-spinner.js which is not useful when importing into a common js project. This is because the dist files are webpack bundles, not the actual spinner module, and includes a bunch of data one wouldn't need if they are doing their own bundling (including some server killing references to document).

Currently, to use this module inside of a node project you have to reference the actual source file import SimpleSpinner from 'vue-simple-spinner/src/components/Spinner.vue' which is less than ideal.

My thought is that the dist files would normally be downloaded directly, not through npm, so setting your package.json main to the source component would better capture how most folks will be using your module. My expectations when I looked at this project was that import SimpleSpinner from 'vue-simple-spinner' would give the me just the vue component, nothing more.

line-size not change

I want to change the line size . I added line-size="88" to spinner element but this error happens :

Invalid prop: type check failed for prop "lineSize". Expected Number, got String.

using it in other vue ?

its not possible to use this inside a vue template?

Unknown plugin with webpack

I get this error when using this component with a webpack build: Unknown plugin "transform-object-rest-spread". It seems it depends on a deprecated version of babel's plugins or something.

Tip - Center spinner over page content

Thanks for the useful spinner!

This is just a tip showing how to display the spinner centered on top of the normal page content during API requests.

In App.vue:

<template>
    <div class="divWaitSpinner" v-if="ShowWaitSpinner">
      <spinner message="Loading..."></spinner>
    </div>
    <div>My page content...</div>
...
</template>

js:

    methods: {
      getInitialApiData() {
        this.ShowWaitSpinner = true;
        axios.all([getLookups(), getDSLink()])
          .then(axios.spread((lku, dsl) => {
            this.Lookups = lku.data;
            this.DSLink = dsl.data;
            this.ShowWaitSpinner = false;
          }));
      },

and this css:

  .divWaitSpinner {
    z-index: 9999;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
  }

Custom line-size warning

The component works fine with all defaults, and I can provide any custom props that are strings (such as "line-bg-color"). However, if I try to provide a custom line-size, it throws a console warning.

<spinner line-size="5" line-bg-color="#fff"></spinner>

Produces this warning:

[Vue warn]: Invalid prop: type check failed for prop "lineSize". Expected Number with value 5, got String with value "5".

It works, but the warning is not ideal.

Using the spinner in single file components

Hello !
I tried using the spinner in a vue file, but your example for es6. did not work.

I did get it working, and you could include this in your readme for future use.
In .vue file :

<template>
          <vue-simple-spinner></vue-simple-spinner>
</template>

<script>
import Spinner from 'vue-simple-spinner'
export default {
  components: {
    'vue-simple-spinner': Spinner
  }
}
</script>

<style></style>

Note the registration of the component is with its name and not: components: {Spinner}, since this will cause it to make a new property with the name Spinner, and not vue-simple-spinner.

Line Size behavior

Just a thought:

When customizing the spinners, I had set size="massive". Then I had tried to adjust the line-size attribute and found that it was not doing anything. Only when I dug into the source code did I realize that if the size attribute is one of your defaults: e.g. "massive", the line-size defaults to 3, iirc.

When I changed to size to size="55", I was able to set the line-size.

Obviously, that's really weird behavior. Would expect them to be independent.

[Vue warn]: Invalid prop: custom validator check failed for prop "size"

"size" property being set to one the standard strings "tiny", as such:

<vue-simple-spinner size="tiny"></vue-simple-spinner>

Results in the run-time warning "[Vue warn]: Invalid prop: custom validator check failed for prop "size"

Tested a few other values ("small", "12", etc...) and this validator error is always present.

import Spinner from 'vue-simple-spinner';

@Component({
    components: {
        Spinner
    }
})