Added spinner component

Author: romanslonov

docs/.vuepress/config.js

@@ -28,6 +28,7 @@ module.exports = {
           'components/checkbox-group',
           'components/radio',
           'components/radio-group',
+          'components/spinner',
           'components/tabs',
           'components/textbox'
         ]

docs/components/spinner.md

@@ -0,0 +1,19 @@
+# Spinner
+Spinner a component that indicate loading state.
+
+## Example
+
+<div class="p-3 border rounded-2 my-3 flex">
+  <v-spinner class="mr-5" />
+  <v-spinner appearance="primary" />
+</div>
+
+```html
+<v-spinner />
+<v-spinner appearance="primary" />
+```
+
+## Props
+Name       | Type     | Description | Default
+---------- | -------- | ----------- | ---------
+appearance | String   | Appearance of spinner ['default', 'primary']  | 'default'

src/components/Spinner/index.js

@@ -0,0 +1,8 @@
+import Spinner from './main.vue';
+
+// eslint-disable-next-line func-names
+Spinner.install = function (Vue) {
+  Vue.component('VSpinner', Spinner);
+};
+
+export default Spinner;

src/components/Spinner/main.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="spinner" :class="classes"></div>
+</template>
+
+<script>
+export default {
+  name: 'VSpinner',
+  props: {
+    appearance: {
+      type: String,
+      default: 'default',
+    },
+  },
+  computed: {
+    classes() {
+      return [
+        `spinner--${this.appearance}`,
+      ];
+    },
+  },
+};
+</script>

src/components/index.js

@@ -6,6 +6,7 @@ export { default as VCheckbox } from './Checkbox';
 export { default as VCheckboxGroup } from './CheckboxGroup';
 export { default as VRadio } from './Radio';
 export { default as VRadioGroup } from './RadioGroup';
+export { default as VSpinner } from './Spinner';
 export { default as VTab } from './Tab';
 export { default as VTabs } from './Tabs';
 export { default as VTextbox } from './Textbox';