TalentService-mobile/components/loading_cat/index.vue

<template>
	<view class="box"  v-show="show">
		<view class="cat">
			<view class="cat__body"></view>
			<view class="cat__body"></view>
			<view class="cat__tail"></view>
			<view class="cat__head"></view>
		</view>
		<view class="load">
			<view class="word">G</view>
			<view class="word">N</view>
			<view class="word">I</view>
			<view class="word">D</view>
			<view class="word">A</view>
			<view class="word">O</view>
			<view class="word">L</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			show:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				viewHeight: this.WindowHeight - 50
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	@mixin fill-full($dir: 'full', $type: absolute) {
		position: $type;

		@if $dir !='bottom' {
			top: 0;
		}

		@if $dir !='right' {
			left: 0;
		}

		@if $dir !='left' {
			right: 0;
		}

		@if $dir !='top' {
			bottom: 0;
		}
	}

	.cat {
		position: relative;
		width: 288rpx;
		max-width: 20em;
		overflow: hidden;
		transform: translateY(-50px);
		&::before {
			content: '';
			display: block;
			padding-bottom: 100%;
		}
	}

	%cat-img {
		@include fill-full;
		animation: rotating 2.79s cubic-bezier(0.65, 0.54, 0.22, 0.82) infinite;

		&::before {
			content: '';
			position: absolute;
			width: 50%;
			height: 50%;
			background-size: 200%;
			background-repeat: no-repeat;
			background-image: url('/static/cat.png');
		}
	}

	.cat__head {
		@extend %cat-img;
		// animation-delay: .2s;
		&::before {
			top: 0;
			right: 0;
			background-position: 100% 0%;
			transform-origin: 0% 100%;
			transform: rotate(75deg);
		}
	}

	.cat__tail {
		@extend %cat-img;
		animation-delay: .2s;
		&::before {
			left: 0;
			bottom: 0;
			background-position: 0% 100%;
			transform-origin: 100% 0%;
			transform: rotate(-30deg);
		}
	}

	.cat__body {
		@extend %cat-img;
		animation-delay: .1s;
		transform: rotate(10deg);
		&:nth-of-type(2) {
			animation-delay: .2s;
		}

		&::before {
			right: 0;
			bottom: 0;
			background-position: 100% 100%;
			transform-origin: 0% 0%;
		}
		
	}

	@keyframes rotating {
		from {
			transform: rotate(720deg);
		}

		to {
			transform: none;
		}
	}

	.box {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: flex-start;
		justify-content: center;
		align-items: center;
		z-index: 10;
	}

	// reset

	*,
	*::before,
	*::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	html {
		height: 100%;
	}

	body {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		margin: 0;
		line-height: 1.4;
	}

	.load {
		position: absolute;
		width: 100vw;
		height: 36px;
		left: 0%;
		transform: translateY(50px);
		overflow: hidden;
	}

	.load .word {
		position: absolute;
		width: 20px;
		height: 36px;
		opacity: 0;
		font-family: Helvetica, Arial, sans-serif;
		animation: move 2s linear infinite;
		transform: rotate(180deg);
		color: #35C4F0;
		font-size: 40rpx;
	}

	.load .word:nth-child(2) {
		animation-delay: 0.2s;
	}

	.load .word:nth-child(3) {
		animation-delay: 0.4s;
	}

	.load .word:nth-child(4) {
		animation-delay: 0.6s;
	}

	.load .word:nth-child(5) {
		animation-delay: 0.8s;
	}

	.load .word:nth-child(6) {
		animation-delay: 1s;
	}

	.load view:nth-child(7) {
		animation-delay: 1.2s;
	}

	@keyframes move {
		0% {
			left: 0;
			opacity: 0;
		}

		35% {
			left: 41%;
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			opacity: 1;
		}

		65% {
			left: 59%;
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			opacity: 1;
		}

		100% {
			left: 100%;
			-moz-transform: rotate(-180deg);
			-webkit-transform: rotate(-180deg);
			-o-transform: rotate(-180deg);
			transform: rotate(-180deg);
			opacity: 0;
		}
	}
</style>