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

``bash
$ yarn add vue-loading-balls
`

or

`bash
$ npm install vue-loading-balls --save
`

Usage

Import the LoadingBalls component in the script section of your app ...

`js
import LoadingBalls from 'vue-loading-balls'

export default {
components: { LoadingBalls },
data: () => ({
isLoading: true
})
// ...
}
`

In the template section, simply drop in the component element . Of course you will want to conditionally display it based on some state property like isLoading from the example above.

`html

`

You should now see ...

!three black balls bouncing vertically

$3

`html

``

Now you should see ...

!five purple balls bouncing vertically

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