SolidScribe/client/src/components/LoadingIconComponent.vue

<template>
	<div class="loading-container">
		<svg version="1.1" id="L6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
   			<rect fill="none" :stroke="$store.getters.getIsNightMode > 0 ? '#FFF':'#16ab39'" stroke-width="4" x="25" y="25" width="50" height="50" rx="5">
				<animateTransform
					attributeName="transform"
					dur="0.5s"
					from="0 50 50"
					to="180 50 50"
					type="rotate"
					id="strokeBox"
					attributeType="XML"
					begin="rectBox.end"/>
			</rect>
			<rect x="25" y="25" :fill="$store.getters.getIsNightMode > 0 ? '#FFF':'#16ab39'" width="50" height="50">
			  <animate
				attributeName="height"
				dur="1.3s"
				attributeType="XML"
				from="50" 
				to="0"
				id="rectBox" 
				fill="freeze"
				begin="0s;strokeBox.end"/>
			</rect>
		</svg>
		<div class="loading-message" v-if="message">{{ message }}</div>
	</div>
</template>

<script>

	export default {
		name: 'LoadingIcon',
		props:[ 'message' ],
		data () {
			return {
				items: []
			}
		},
		beforeMount(){

		},
		mounted(){
		},
		methods: {
			onClickTag(index){
				console.log('yup')
			},
		}
	}
</script>
<style type="text/css" scoped>
	.loading-container {
		text-align: center;
		width: 100%;
		height: 100px;
		margin: 20px 0;
	}
	.loading-container svg {
		width: 60px;
		height: 60px;
	}
	.loading-message {
		font-size: 1.5em;
	}
</style>