cc_animation

It is a heartBeat animation,you can set its' width and height or use its'default height(100px) and width(100px) when you use it; like this:

<template>
  <div id="app">
    <heart-beat width="300px" height="300px"></heart-beat>
  </div>
</template>

Remember to ensure your settion of width and hight,they have to be the same,or they will be so ugly!!! What's more,when you use it for a loading animation,you should separate it from other elements to make sure that it can in the center of the screen. Like this

<template>
  <div id="app"> 
      <div class="other">
        <span>{{str}}</span>
      </div>
      <heart-beat width="500px" height="500px"></heart-beat>
  </div>
</template>
<style>
  .other{
    position: absolute;
    z-index: 0;
  }
</style>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.