realty/virgo.wzfrontend/console/src/loading/loading.vue

<template>
	<div class="loading" v-show="show">
		<div class="spinner2">
			<div class="rect1 rect"></div>
			<div class="rect2 rect"></div>
			<div class="rect3 rect"></div>
			<div class="rect4 rect"></div>
			<div class="rect5 rect"></div>
			<div class="rect6 rect"></div>
			<div class="rect7 rect"></div>
			<div class="percent" v-if="percent">{{percent}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				percent: ''
			}
		},
		watch: {
			show(value) {
				this.show = value;
			},
			percent(val) {
				this.percent = val;
			}
		},
	}
</script>

<style lang="scss">
	.loading {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999999999;

		.spinner2 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 200px;
			height: 60px;
			text-align: center;
			font-size: 10px;
			display: flex;
			align-items: center;
			justify-content: center;

			.percent {
				font-size: 26px;
				color: $--color-primary;
				margin-left: 10px;
				width: 66px;
				text-align: right
			}
		}

		.spinner2 .rect {
			background-color: $--color-primary;
			height: 100%;
			width: 6px;
			-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
			animation: sk-stretchdelay 1.2s infinite ease-in-out;
			margin: 0 1px;
		}

		.spinner2 .rect2 {
			-webkit-animation-delay: -1.1s;
			animation-delay: -1.1s;
		}

		.spinner2 .rect3 {
			-webkit-animation-delay: -1.0s;
			animation-delay: -1.0s;
		}

		.spinner2 .rect4 {
			-webkit-animation-delay: -0.9s;
			animation-delay: -0.9s;
		}

		.spinner2 .rect5 {
			-webkit-animation-delay: -0.8s;
			animation-delay: -0.8s;
		}

		.spinner2 .rect6 {
			-webkit-animation-delay: -0.7s;
			animation-delay: -0.7s;
		}

		.spinner2 .rect7 {
			-webkit-animation-delay: -0.6s;
			animation-delay: -0.6s;
		}

		@-webkit-keyframes sk-stretchdelay {

			0%,
			40%,
			100% {
				-webkit-transform: scaleY(0.4)
			}

			20% {
				-webkit-transform: scaleY(1.0)
			}
		}

		@keyframes sk-stretchdelay {

			0%,
			40%,
			100% {
				transform: scaleY(0.4);
				-webkit-transform: scaleY(0.4);
			}

			20% {
				transform: scaleY(1.0);
				-webkit-transform: scaleY(1.0);
			}
		}
	}
</style>