Skip to content

Instantly share code, notes, and snippets.

@Kricket
Created June 21, 2021 09:17
Show Gist options
  • Save Kricket/7233168c2fe9f84d67a8fe351dd16f90 to your computer and use it in GitHub Desktop.
Save Kricket/7233168c2fe9f84d67a8fe351dd16f90 to your computer and use it in GitHub Desktop.
Vue V3 component wrapping spin.js spinner
<!--
Example implementation of a Vue V3 component wrapper for the spin.js library
https://spin.js.org/
-->
<template>
<div ref="spinDiv"></div>
</template>
<style lang="scss">
@import '~spin.js/spin.css';
</style>
<script lang="ts">
import { defineComponent, PropType, ref, unref } from 'vue';
import { Spinner, SpinnerOptions } from 'spin.js';
/**
* Options that will be applied by default to all spinners.
* Can be overridden using the 'opts' component prop.
*/
const defaultOptions: SpinnerOptions = {
color: '#112233',
};
export default defineComponent({
setup() {
return {
// This is necessary so that we can access the div to which the spinner is attached
spinDiv: ref<HTMLElement>(),
};
},
props: {
opts: {
// Spinner options (overrides defaults)
type: Object as PropType<SpinnerOptions>,
},
},
data: () => ({
spinner: null as Spinner | null,
}),
mounted() {
const opts = Object.assign({}, defaultOptions, this.opts);
this.spinner = new Spinner(opts).spin(unref(this.spinDiv));
},
unmounted() {
this.spinner?.stop();
},
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment