style.css

body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to bottom, teal, aqua);
}

.battery {
	width: 6em;
	height: 3em;
	font-size: 30px;
	color: midnightblue;
	border: 0.5em solid currentColor;
	border-radius: 0.2em;
	position: relative;
	background-image: linear-gradient(to right, whitesmoke, whitesmoke);
	background-repeat: no-repeat;
	background-size: 30% 80%;
	background-position: 0.3em 0.3em;
	animation: charge 5s steps(8) infinite;
}

.battery::after {
	content: '';
	position: absolute;
	width: 0.5em;
	height: 2em;
	background-color: currentColor;
	top: 0.5em;
	right: -1em;
	border-radius: 0 0.2em 0.2em 0;
}

@keyframes charge {
	from {
		background-size: 10% 80%;
	}

	to {
		background-size: 95% 80%;
	}
}