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