vue-loading-balls
v1.0.0
Published
A bouncing balls loading animation component for Vue.js 2.x with smooth SGV animation
Downloads
10
Maintainers
Readme
Vue Loading Balls
A bouncing balls loading animation component for Vue.js 2.x that uses smooth SGV animation for natural looking motion. Easily configure the number, size, and colour of the balls via props.
Inspired by Nash Vail's article, How you can use simple trigonometry to create better loaders.
And, Sarah Drasner's book on SVG Animations in which she reminds us that animation aids in perceived performance.
Humans over-estimate passive waits by 36%
-- Richard Larson of MIT
Compatibility
Vue.js 2.x
Installation
$ yarn add vue-loading-balls
or
$ npm install vue-loading-balls --save
Usage
Import the LoadingBalls component in the script section of your app ...
import LoadingBalls from 'vue-loading-balls'
export default {
components: { LoadingBalls },
data: () => ({
isLoading: true
})
// ...
}
In the template section, simply drop in the component element <loading-balls />
. Of course you will want to conditionally display it based on some state property like isLoading
from the example above.
<template>
<loading-balls v-if="isLoading" />
<main v-else>
<h1>Main content here ...</h1>
</main>
</template>
You should now see ...
Example with options
<template>
<loading-balls
v-if="isLoading"
:count="4"
:radius="8"
color="#4b0082"
/>
<main v-else>
<h1>Main content here ...</h1>
</main>
</template>
Now you should see ...
Configurable options:
| Key | Description | Default | Value | | ------ | --------------------------------------------------------------------- | ------- | ---------------- | | count | number of balls | 3 | Number | String | | color | colour of the balls -- any valid CSS color value (hex, rgb, or hsl) | #333333 | String | | radius | radius of the balls in px | 10 | Number | String | | width | width in px of the enclosing SVG element | 300 | Number | String | | height | height in px of the enclosing SVG element | 150 | Number | String |
Step timing and amplitude are automatically calculated to ensure smooth, natural looking animation.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
License
This project is licensed under the MIT License - see the LICENSE.md file for details