Based on loaders.css
npm install -S vue-loaders
import Vue from 'vue';
import 'vue-loaders/dist/vue-loaders.css';
import * as VueLoaders from 'vue-loaders';
Vue.use(VueLoaders);
import Vue from 'vue';
import 'vue-loaders/dist/vue-loaders.css';
import { BallBeatLoader } from 'vue-loaders';
Vue.component(BallBeatLoader.name, BallBeatLoader);
import Vue from 'vue';
import 'vue-loaders/dist/vue-loaders.css';
import { BallBeatLoader, BallClipRotateLoader, install } from 'vue-loaders';
const VueLoaders = { BallBeatLoader, BallClipRotateLoader, install };
Vue.use(VueLoaders);
import Vue from 'vue';
import 'vue-loaders/dist/vue-loaders.css';
import { BallBeatLoader } from 'vue-loaders';
new Vue({ components: { BallBeatLoader }, template: '<ball-beat-loader />' });
<!DOCTYPE html>
<html>
<head>
<title>VueLoaders demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-loaders"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-loaders/dist/vue-loaders.css">
</head>
<body>
<div id="app">
<ball-pulse-loader color="#000000" size="20px"></ball-pulse-loader>
</div>
<script>
Vue.use(VueLoaders);
new Vue().$mount('#app');
</script>
</body>
</html>
- BallBeatLoader
- BallClipRotateLoader
- BallClipRotateMultipleLoader
- BallClipRotatePulseLoader
- BallGridBeatLoader
- BallGridPulseLoader
- BallPulseLoader
- BallPulseRiseLoader
- BallPulseSyncLoader
- BallRotateLoader
- BallScaleLoader
- BallScaleMultipleLoader
- BallScaleRippleLoader
- BallScaleRippleMultipleLoader
- BallSpinFadeLoader
- BallTrianglePathLoader
- BallZigZagLoader
- BallZigZagDeflectLoader
- CubeTransitionLoader
- LineScaleLoader
- LineScalePartyLoader
- LineScalePulseOutLoader
- LineScalePulseOutRapidLoader
- LineSpinFadeLoader
- PacmanLoader
- SemiCircleSpinLoader
- SquareSpinLoader
- TriangleSkewSpinLoader