CSS充电状态效果_css电池电量图

<template>
	<!-- 定义一个视图容器，用于展示加载动画 -->
	<view class="loader">
		<!-- 动画内容将通过CSS样式实现 -->
	</view>
</template>
 
<script>
	// (此处没有JavaScript代码)
</script>
 
<style>
	/* 设置整个页面背景为深灰色 */
	body {
		background-color: #212121;
	}
 
	/* 定义加载动画容器的样式 */
	.loader {
		/* 设置顶部外边距以垂直居中 */
		margin-top: 350px;
		/* 设置左侧外边距以水平居中（调整为40%） */
		margin-left: 40%;
		/* 设置宽度和高度 */
		width: 140px;
		height: 80px;
 
		/* 边框样式，其中右侧无边框颜色 */
		border: 4px solid #00F45B;
		border-right-color: transparent;
 
		/* 内边距 */
		padding: 6px;
 
		/* 背景样式，使用重复线性渐变创建动态效果 */
		background: repeating-linear-gradient(90deg, #00F45B 0 20px, #0000 0 30px) left/0% 100% no-repeat content-box content-box;
 
		/* 设置定位方式以便子元素绝对定位 */
		position: relative;
 
		/* 添加关键帧动画，使背景大小按步骤改变并无限循环 */
		animation: