<script type="text/x-templete" id="ui-loading">
<div class="ui-loading">
	<div class="ui-loading-inner" :style="innerStyle">
		<svg viewBox="0 0 100 100">
			<circle class="ui-loading-path" cx="50" cy="50" r="40" fill="none" :style="strokeStyle"></circle>
		</svg>
	</div>
	<span class="ui-loading-text"><slot><slot></span>
</div>
</script>

<script type="text/x-templete" id="main-page">
<div>
	<div class="demo1">
		<ui-loading
			:strokeColor="strokeColor"
			:strokeWidth="strokeWidth"
			:size="size"
		>加载中
	</ui-loading>
	</div>
</div>
</script>

<div id="app"></div>
.demo1 {
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ui-loading {
	display:inline-block;
	position: relative;
	&-inner{
		line-height: 1;
		background-color: transparent;
		display: inline-block;
    width: 100%;
    border-radius: 100px;
    vertical-align: middle;
	}
	&-path{
		stroke-linecap: round;
		stroke-dasharray: 251.327px, 251.327px;
		animation: ui-loading-spin 1.8s ease infinite both;
		transform-origin: center center;
	}
	&-text {
		display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 1;
		font-size: .8em;
		color: rgba(0,0,0,.65);
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    font-family: tahoma;
    margin: 0;
	}
}
	@keyframes ui-loading-spin {
		0%{transform:rotate(0); stroke-dasharray:0, 251.327px;}
		100%{transform:rotate(360deg); stroke-dasharray:251.327px, 251.327px;}
	}
View Compiled
Vue.component('ui-loading', {
	props: {
		'size': {
			type: Number,
			default: 100,
		},
		'strokeWidth':{
			type:Number,
			default: 8
		}, 
		'strokeColor':{
			type:String,
			default: '#108EE9'
		}, 
	},
  template: '#ui-loading',
	computed: {
		innerStyle: function(){
			return { width:`${this.size}px`, height: `${this.size}px`}
		},
		strokeStyle: function(){
			const currPercent = this.percent/100 * this.len;
			return {
				'stroke':this.strokeColor,
				'stroke-width': `${this.strokeWidth}px`,
			}
		}
	}
})

// start app
new Vue({
  el: '#app',
 	template: '#main-page',
  data: {
		strokeColor: '#108EE9',
		strokeWidth: 5,
		size: 80,
  }
})
View Compiled
Rerun