property/user_ui/components/loading/loading.vue

<!-- <template>
	<view>
		
		<view class="loading" v-if="is_loading">
			
			<image class="load_img" :src="waimai ? '../../../static/loading/loading2.gif' : '../../static/loading/loading2.gif'" mode=""></image>
			
		</view>
		
	</view>
</template> -->

<template>
	<view class="" v-if="is_loading">
		<view class="loader">
				
		</view>
	</view>
</template>

<script>
	export default {
		props: ["waimai"],
		data() {
			return {
				
			}
		},
		methods:{
			switch_loading(){
				this.$store.commit("switch_loading")
			}
		},
		//实测直接在标签属性里写  $store.state.XX  拿不到数据  所以这里通过 计算属性去监听一下
		computed:{
			is_loading(){
				return this.$store.state.user.loading
			}
		}
	}
</script>

<style scoped>
	.loading{position: fixed;top: 0;left: 0;bottom: 0;right: 0;display: flex;align-items: center;justify-content: space-around;z-index: 1001;background: transparent;}
	.load_img{width: 640rpx;height: 490rpx;}
	
	.loader,
	.loader:before,
	.loader:after {
	  -webkit-animation: load1 1s infinite ease-in-out;
	  animation: load1 1s infinite ease-in-out;
	  width: 1em;
	  height: 3em;
	}
	.loader {
	  color: #FF8080;
	  background: #FF8080;
	  text-indent: -9999em;
	  margin: 88px auto;
	  position: fixed;
	  font-size: 16upx;
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-animation-delay: -0.16s;
	  animation-delay: -0.16s;
	  top: 30%;left: 0;bottom: 0;right: 0;
	}
	.loader:before,
	.loader:after {
	  position: absolute;
	  top: 0;
	  content: '';
	}
	.loader:before {
	  left: -1.5em;
	  -webkit-animation-delay: -0.32s;
	  animation-delay: -0.32s;
	  background: #FF9999;
	  color: #FF9999;
	}
	.loader:after {
	  left: 1.5em;
	  background: #FE6666;
	  color: #FE6666;
	}
	@-webkit-keyframes load1 {
	  0%,
	  80%,
	  100% {
		box-shadow: 0 0;
		height: 2em;
	  }
	  40% {
		box-shadow: 0 -2em;
		height: 3em;
	  }
	}
	@keyframes load1 {
	  0%,
	  80%,
	  100% {
		box-shadow: 0 0;
		height: 2em;
	  }
	  40% {
		box-shadow: 0 -2em;
		height: 3em;
	  }
	}
	
	/* .loader,
	.loader:before,
	.loader:after {
	  border-radius: 50%;
	  width: 2.5em;
	  height: 2.5em;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  -webkit-animation: load7 1.8s infinite ease-in-out;
	  animation: load7 1.8s infinite ease-in-out;
	}
	.loader {
	  color: #000;
	  font-size: 10px;
	  margin: 80px auto;
	  position: fixed;
	  text-indent: -9999em;
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-animation-delay: -0.16s;
	  animation-delay: -0.16s;
	  top: 30%;left: 0;bottom: 0;right: 0;
	}
	.loader:before,
	.loader:after {
	  content: '';
	  position: absolute;
	  top: 0;
	}
	.loader:before {
	  left: -3.5em;
	  -webkit-animation-delay: -0.32s;
	  animation-delay: -0.32s;
	}
	.loader:after {
	  left: 3.5em;
	}
	@-webkit-keyframes load7 {
	  0%,
	  80%,
	  100% {
		box-shadow: 0 2.5em 0 -1.3em;
	  }
	  40% {
		box-shadow: 0 2.5em 0 0;
	  }
	}
	@keyframes load7 {
	  0%,
	  80%,
	  100% {
		box-shadow: 0 2.5em 0 -1.3em;
	  }
	  40% {
		box-shadow: 0 2.5em 0 0;
	  }
	} */
	
	/* .loader {
	  font-size: 10px;
	  margin: 50px auto;
	  text-indent: -9999em;
	  width: 8em;
	  height: 8em;
	  border-radius: 50%;
	  background: transparent ;
	  background: -moz-linear-gradient(left, #CCCCCC 10%, rgba(255, 255, 255, 0) 42%);
	  background: -webkit-linear-gradient(left, #CCCCCC 10%, rgba(255, 255, 255, 0) 42%);
	  background: -o-linear-gradient(left, #CCCCCC 10%, rgba(255, 255, 255, 0) 42%);
	  background: -ms-linear-gradient(left, #CCCCCC 10%, rgba(255, 255, 255, 0) 42%);
	  background: linear-gradient(to right, #CCCCCC 10%, rgba(255, 255, 255, 0) 42%);
	  position: fixed;
	  top: 30%;left: 0;bottom: 0;right: 0;
	  -webkit-animation: load3 1.4s infinite linear;
	  animation: load3 1.4s infinite linear;
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	}
	.loader:before {
	  width: 50%;
	  height: 50%;
	  background: transparent ;
	  border-radius: 100% 0 0 0;
	  position: absolute;
	  top: 0;
	  left: 0;
	  content: '';
	}
	.loader:after {
	  background: #FFFFFF ;
	  width: 75%;
	  height: 75%;
	  border-radius: 50%;
	  content: '';
	  margin: auto;
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	}
	@-webkit-keyframes load3 {
	  0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	  }
	  100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	  }
	}
	@keyframes load3 {
	  0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	  }
	  100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	  }
	} */
</style>