初次提交

uni_modules/zero-loading/components/zero-loading/static/loading-atom.vue

@@ -0,0 +1,109 @@
+<template>
+	<view class="container">
+		<view class="box">
+			<view class="atom"></view>
+			<view class="atom"></view>
+			<view class="atom"></view>
+			<view class="dot"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'loading-atom',
+	data() {
+		return {};
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+.box {
+	position: relative;
+	width: 120rpx;
+	height: 120rpx;
+}
+.dot{
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background-color: #0396FF;
+	animation: dotbreath 2s linear infinite;
+}
+.atom {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	border-left-width: 6rpx;
+	border-top-width: 6rpx;
+	border-left-color: #0396FF;
+	border-left-style: solid;
+	border-top-style: solid;
+	border-top-color: transparent;
+	
+}
+.atom:nth-of-type(1) {
+	left: 0%;
+	top: 0%;
+	animation: atom1 1s linear infinite;
+}
+.atom:nth-of-type(2) {
+	right: 0%;
+	top: 0%;
+	animation: atom2 1s linear infinite;
+}
+.atom:nth-of-type(3) {
+	right: 0%;
+	bottom: 0%;
+	animation: atom3 1s linear infinite;
+}
+@keyframes dotbreath {
+	0% {
+		opacity:1;
+	}
+	
+	50%{
+		opacity:0.5;
+	}
+	100%{
+		opacity:1;
+	}
+}
+@keyframes atom1 {
+	0% {
+		transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
+	}
+	100% {
+		transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
+	}
+}
+@keyframes atom2 {
+	0% {
+		transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
+	}
+	100% {
+		transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
+	}
+}
+
+@keyframes atom3 {
+	0% {
+		 transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
+	}
+	100% {
+		 transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
+	}
+}
+</style>

uni_modules/zero-loading/components/zero-loading/zero-loading.vue

@@ -0,0 +1,76 @@
+<template>
+	<!--  -->
+	<view :style="{'position': position,'z-index':zIndex}" class="container" :class="mask?'mask':''" @click.prevent="handleClick">
+		<view>
+			<view class="main">
+				<loading8 v-if="type=='atom'"></loading8>
+			
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	import loading8 from "./static/loading-atom.vue"
+
+
+	export default {
+		name: "zero-loading",
+		components: {
+			loading8,
+		},
+		props: {
+			type: {
+				type: String,
+				default: "atom"
+			},
+			position: {
+				type: String,
+				default: "fixed"
+			},
+			zIndex: {
+				type: Number,
+				default: 9,
+			},
+			mask: {
+				type: Boolean,
+				default: false,
+			}
+
+
+		},
+		data() {
+			return {
+				
+			};
+		},
+		methods: {
+			handleClick() {
+				this.$emit('click')
+			}
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.mask {
+		z-index: 999 !important;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: 100vh;
+		width: 100vw;
+		background: rgba(7, 17, 27, .3);
+		transform: translate(0, 0);
+	}
+</style>