DigitalHuman-app/pages/list/creatingVideo/creatingVideo.vue

<template>
	<view class="creating-video">
		<view class="container">
			<view class="dot">
			</view>
			<view class="pulse"></view>
			<view class="pulse1"></view>
		</view>
		<view class="loading-text">视频生成中……</view>
		<view class="progress-box">
			<progress :percent="50" show-info stroke-width="3" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.creating-video {
		@keyframes warn {
			0% {
				transform: scale(0.1);
				-webkit-transform: scale(0.1);
				opacity: 0.0;
			}

			25% {
				transform: scale(0.25);
				-webkit-transform: scale(0.25);
				opacity: 0.1;
			}

			50% {
				transform: scale(0.5);
				-webkit-transform: scale(0.5);
				opacity: 0.3;
			}

			75% {
				transform: scale(0.6);
				-webkit-transform: scale(0.6);
				opacity: 0.5;
			}

			100% {
				transform: scale(0.7);
				-webkit-transform: scale(0.7);
				opacity: 0.0;
			}
		}

		@keyframes warn1 {
			0% {
				transform: scale(0.3);
				-webkit-transform: scale(0.3);
				opacity: 0.0;
			}

			25% {
				transform: scale(0.3);
				-webkit-transform: scale(0.3);
				opacity: 0.1;
			}

			50% {
				transform: scale(0.3);
				-webkit-transform: scale(0.3);
				opacity: 0.3;
			}

			75% {
				transform: scale(0.4);
				-webkit-transform: scale(0.4);
				opacity: 0.5;
			}

			100% {
				transform: scale(0.6);
				-webkit-transform: scale(0.6);
				opacity: 0.0;
			}
		}

		.container {
			position: relative;
			width: 100%;
			height: 300px;
		}

		.dot {
			position: absolute;
			margin: 0 auto;
			width: 150px;
			height: 150px;
			left: calc((100% - 150px) / 2);
			top: 80px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			background: rgba(189, 49, 36, 0.9);
			box-shadow: 1px 1px 5px #BD3124, 1px 1px 10px #BD3124, 1px 1px 15px #BD3124;
			border-radius: 50%;
			z-index: 2;
			color: #fff;
			text-align: center;
			line-height: 150px;
			font-size: 20px;
		}

		.pulse {
			position: absolute;
			width: 320px;
			height: 320px;
			left: calc((100% - 320px)/2);
			top: -5px;
			border: 6px solid rgba(222, 134, 143, 0.7);
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			z-index: 1;
			opacity: 0;
			-webkit-animation: warn 2s linear;
			-moz-animation: warn 2s linear;
			animation: warn 2s linear;
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px rgba(222, 134, 143, 0.8);
		}

		.pulse1 {
			position: absolute;
			width: 320px;
			height: 320px;
			left: calc((100% - 320px)/2);
			top: -5px;
			border: 6px solid rgba(222, 134, 143, 0.9);
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			z-index: 1;
			opacity: 0;
			-webkit-animation: warn1 2s linear;
			-moz-animation: warn1 2s linear;
			animation: warn1 2s linear;
			-webkit-animation-iteration-count: infinite;
			-moz-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
			box-shadow: 1px 1px 30px rgba(222, 134, 143, 0.9);
		}

		.loading-text {
			width: 100%;
			text-align: center;
			font-size: 20px;
		}

		.progress-box {
			margin-top: 100px;
			padding: 0 20px;
			width: 100%;
			height: 50px;
			margin-bottom: 60rpx;
			/deep/ .uni-progress-inner-bar{
				background-color: #DE868F !important;
			}
		}
	}
</style>