tra-app/src/components/loading.vue

<template>
		<view :class="['loading', type]">
			<view></view>
			<view></view>
			<view></view>
			<view></view>
			<view></view>
			<view></view>
			<view></view>
			<view></view>
		</view>
</template>

<script>
import { computed } from 'vue'

	export default {
		name:"loading",
		props:{
			type:{
				default: 'cr',// cl cr easy
				type: String
			},
			size: {
				default: '32',
				type: [String, Number]
			},
			color: {
				default: 'black',
				type: String
			}
		},
		computed:{
			loadingWidth(){
				return this.size + 'rpx'
			},
			easyLoadingWidth(){
				return Number(this.size) * 15 / 16  + 'rpx'
			},
			easyLoadingBorderWidth(){
				return Number(this.size) / 16  + 'rpx'
			},
			loadingColor(){
				return this.color
			}
		},
		data() {
			return {
			
			};
		}
	}
</script>

<style lang="scss">

		.loading.easy {
		  width: v-bind(easyLoadingWidth);
		  height: v-bind(easyLoadingWidth);
			border-style: solid;
			border-color: v-bind(loadingColor);
		  border-width: v-bind(easyLoadingBorderWidth);
		  border-top-color: transparent;
		  border-radius: 100%;
		  animation: circle infinite 0.75s linear;
		}
		
		// 转转转动画
		@keyframes circle {
		  0% {
		    transform: rotate(0);
		  }
		  100% {
		    transform: rotate(360deg);
		  }
		}
		
		
		.loading,
		.loading.cl > view {
		  position: relative;
		  box-sizing: border-box;
		}
		
		.loading.cl {
		  display: block;
		  font-size: 0;
		  color: v-bind(loadingColor);
		}
		
		.loading.cl.la-dark {
		  color: #333;
		}
		
		.loading.cl > view {
		  display: inline-block;
		  float: none;
		  background-color: currentColor;
		  border: 0 solid currentColor;
		}
		
		.loading.cl {
		  width: v-bind(loadingWidth);
		  height: v-bind(loadingWidth);
		}
		
		.loading.cl > view {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  width: 25%;
		  height: 25%;
			transform: translate(-50%, -50%);
		  border-radius: 100%;
		  animation: ball-spin-clockwise 1s infinite ease-in-out;
		}
		
		.loading.cl > view:nth-child(1) {
		  top: 5%;
		  left: 50%;
		  animation-delay: -0.875s;
		}
		
		.loading.cl > view:nth-child(2) {
		  top: 18.1801948466%;
		  left: 81.8198051534%;
		  animation-delay: -0.75s;
		}
		
		.loading.cl > view:nth-child(3) {
		  top: 50%;
		  left: 95%;
		  animation-delay: -0.625s;
		}
		
		.loading.cl > view:nth-child(4) {
		  top: 81.8198051534%;
		  left: 81.8198051534%;
		  animation-delay: -0.5s;
		}
		
		.loading.cl > view:nth-child(5) {
		  top: 94.9999999966%;
		  left: 50.0000000005%;
		  animation-delay: -0.375s;
		}
		
		.loading.cl > view:nth-child(6) {
		  top: 81.8198046966%;
		  left: 18.1801949248%;
		  animation-delay: -0.25s;
		}
		
		.loading.cl > view:nth-child(7) {
		  top: 49.9999750815%;
		  left: 5.0000051215%;
		  animation-delay: -0.125s;
		}
		
		.loading.cl > view:nth-child(8) {
		  top: 18.179464974%;
		  left: 18.1803700518%;
		  animation-delay: 0s;
		}
		
		.loading.cl.la-sm {
		  width: 50%;
		  height: 50%;
		}
		
		.loading.cl.la-sm > view {
		  width:12.5%;
		  height:12.5%;
			transform: translate(-50%, -50%);
		}
		
		.loading.cl.la-2x {
		  width: 64rpx;
		  height: 64rpx;
		}
		
		.loading.cl.la-2x > view {
		  width: 50%;
		  height: 50%;
			transform: translate(-50%, -50%);
		}
		
		.loading.cl.la-3x {
		  width: 96rpx;
		  height: 96rpx;
		}
		
		.loading.cl.la-3x > view {
		  width: 24rpx;
		  height: 24rpx;
			transform: translate(-50%, -50%);
		}
		
		@keyframes ball-spin-clockwise {
		  0%,
		  100% {
		    opacity: 1;
		    transform: scale(1);
		  }
		
		  20% {
		    opacity: 1;
		  }
		
		  80% {
		    opacity: 0;
		    transform: scale(0);
		  }
		}
		
		.loading.cr,
		.loading.cr > view {
		  position: relative;
		  box-sizing: border-box;
		}
		
		.loading.cr {
		  display: block;
		  font-size: 0;
		  color: v-bind(loadingColor);
		}
		
		.loading.cr.la-dark {
		  color: #333;
		}
		
		.loading.cr > view {
		  display: inline-block;
		  float: none;
		  background-color: currentColor;
		  border: 0 solid currentColor;
		}
		
		.loading.cr {
		  width: v-bind(loadingWidth);
		  height: v-bind(loadingWidth);
		}
		
		.loading.cr > view {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  width: 25%;
		  height: 25%;
			transform: translate(-50%, -50%);
		  border-radius: 100%;
		  animation: ball-spin 1s infinite ease-in-out;
		}
		
		.loading.cr > view:nth-child(1) {
		  top: 5%;
		  left: 50%;
		  animation-delay: -1.125s;
		}
		
		.loading.cr > view:nth-child(2) {
		  top: 18.1801948466%;
		  left: 81.8198051534%;
		  animation-delay: -1.25s;
		}
		
		.loading.cr > view:nth-child(3) {
		  top: 50%;
		  left: 95%;
		  animation-delay: -1.375s;
		}
		
		.loading.cr > view:nth-child(4) {
		  top: 81.8198051534%;
		  left: 81.8198051534%;
		  animation-delay: -1.5s;
		}
		
		.loading.cr > view:nth-child(5) {
		  top: 94.9999999966%;
		  left: 50.0000000005%;
		  animation-delay: -1.625s;
		}
		
		.loading.cr > view:nth-child(6) {
		  top: 81.8198046966%;
		  left: 18.1801949248%;
		  animation-delay: -1.75s;
		}
		
		.loading.cr > view:nth-child(7) {
		  top: 49.9999750815%;
		  left: 5.0000051215%;
		  animation-delay: -1.875s;
		}
		
		.loading.cr > view:nth-child(8) {
		  top: 18.179464974%;
		  left: 18.1803700518%;
		  animation-delay: -2s;
		}
		
		.loading.cr.la-sm {
		  width: 50%;
		  height: 50%;
		}
		
		.loading.cr.la-sm > view {
		  width:12.5%;
		  height:12.5%;
			transform: translate(-50%, -50%);
		}
		
		.loading.cr.la-2x {
		  width: 64rpx;
		  height: 64rpx;
		}
		
		.loading.cr.la-2x > view {
		  width: 50%;
		  height: 50%;
			transform: translate(-50%, -50%);
		}
		
		.loading.cr.la-3x {
		  width: 96rpx;
		  height: 96rpx;
		}
		
		.loading.cr.la-3x > view {
		  width: 24rpx;
		  height: 24rpx;
			transform: translate(-50%, -50%);
		}
		
		@keyframes ball-spin {
		  0%,
		  100% {
		    opacity: 1;
		    transform: scale(1);
		  }
		
		  20% {
		    opacity: 1;
		  }
		
		  80% {
		    opacity: 0;
		    transform: scale(0);
		  }
		}
</style>