Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @inotom/vue-svg-loading with all npm packages installed. Try it out:

var vueSvgLoading = require("@inotom/vue-svg-loading")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@inotom/vue-svg-loading v2.0.0

SVG loading animation Vue.js component.

vue-svg-loading

SVG loading animation Vue.js component.

Demo

Demo

Install

Browser

<script src="vue.js"></script>
<script src="vue-svg-loading.min.js"></script>

npm

npm install -D @inotom/vue-svg-loading

Usage

Browser

<div id="app">
  <svg-loading></svg-loading>
  <svg-spinner></svg-spinner>
</div>

<script src="vue.js"></script>
<script src="vue-svg-loading.min.js"></script>
<script>
Vue.use(SvgLoading);
new Vue({
  el: '#app'
});
</script>

SFC

<template>
  <svg-loading></svg-loading>
  <svg-spinner></svg-spinner>
</template>

<script>
import { SvgLoading, SvgSpinner } from '@inotom/vue-svg-loading';

export default {
  components: {
    SvgLoading,
    SvgSpinner,
  }
}
</script>

Props

svg-loading

nametypedefaultsdescription
:sizeNumber50width/height pixel size
fillString#666SVG fill color

svg-spinner

nametypedefaultsdescription
sizeStringnormalSize name (normal, small, large)
fillString#666SVG spinner circle color

License

MIT

Author

inotom

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free