<template>
	<div class="x_loading">
		<div class="x_loading-main">
			<svg class="x_loading-circular" viewBox="25 25 50 50">
				<circle class="x_loading-path" cx="50" cy="50" r="20" fill="none" />
			</svg>
      <p v-if="text" class="x_loading-text">{{ text }}</p>
		</div>
		<div class="x_loading-mask"></div>
	</div>
</template>

<script>
import mixin from "../mixin";
export default {
	name: mixin.prefix + "loading",
	data() {
		return {
			text:''
		};
	},
};
</script>

<style lang="less" scoped>
.x_loading {
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	&-main {
		backface-visibility: hidden;
		position: relative;
    z-index: 1000;
    text-align: center;
	}
	&-circular {
		height: 42px;
		width: 42px;
		animation: loading-rotate 2s linear infinite;
	}
	&-path {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		stroke-width: 2;
		stroke: #ff8200;
		stroke-linecap: round;
  }
  &-text {
    color: #ff8200;
    margin: 3px 0;
    font-size: 14px;
    text-align: center;
  }
	&-mask {
		background-color: #000;
		bottom: 0;
		left: 0;
		opacity: 0.5;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 999;
	}
}
@keyframes loading-rotate {
	100% {
		transform: rotate(1turn);
	}
}
@keyframes loading-dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -40px;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -120px;
	}
}
</style>