<template>
	<view class="charge-loading-box">
		<view class="charge-loading">
			<view class="c-loading"></view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less" scoped>
	.charge-loading-box {
		margin-top: 50rpx;
		margin-left: 100rpx;
	}

	.charge-loading {
		width: 364rpx;
		height: 36rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		overflow: hidden;
	}

	.c-loading {
		width: 100%;
		height: 100%;
		background: linear-gradient(66deg,
				rgba(139, 243, 251, 0),
				#60C8FE,
				#53D4FF,
				 rgba(139, 243, 251, 0.7),);
		border-radius: 18rpx;
		animation: loading 3s linear infinite;
		background-size: 200% 100%;
	}

	@keyframes loading {
		0% {
			background-position: 100% 0;
		}

		100% {
			background-position: -100% 0;
		}
	}
</style>