If your website has a dark theme and you need a light progress bar, this progress bar can help you. The progress bar in this post has a battery icon on the left and top of the progress bar. The percentage of progress is written at the top of the progress bar and to the right of it. This progress bar gets brighter as it gets closer to 100%. This progress bar automatically goes up to one hundred and repeats.


HTML
<!-- This script got from www.devanswer.com -->
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
    <div class="container">
        <i class="fas fa-3x fa-battery-full icon"></i>
        <div class="progress2 progress-moved">
            <div class="progress-bar2"></div>
            <div class="loader" style="--n: 1; --f: 0;"></div>
        </div>
    </div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
body {
	font-family: "Montserrat", sans-serif;
	background: black;
	color: white;
}
.container {
	margin: 100px auto;
	margin-top: 220px;
	width: 400px;
	text-align: center;
	position: relative;
}
.progress2 {
	border-radius: 30px;
	background-color: #fff;
}
.progress-bar2 {
	height: 18px;
	border-radius: 30px;
	transition: 0.4s linear;
	transition-property: width, background-color;
}
.progress-moved .progress-bar2 {
	background-color: #f3c623;
	animation: progress 5s infinite;
}
@keyframes progress {
	0% {
		width: 0%;
		background: #f9bcca;
	}
	100% {
		width: 100%;
		background: #f3c623;
		box-shadow: 0 0 40px #f3c623;
	}
}
.icon {
	color: #f3c623;
	animation: icon 5s infinite;
	background-color: transparent;
	padding-right: 400px;
	padding-bottom: 20px;
}
@keyframes icon {
	0% {
		opacity: 0.2;
		text-shadow: 0 0 0 #f3c623;
	}
	100% {
		opacity: 1;
		text-shadow: 0 0 10px #f3c623;
	}
}
.loader {
	--p: 0;
	animation: p 5s steps(100) infinite;
	counter-reset: p var(--p);
	font-size: 2.1em;
	position: absolute;
	bottom: 45px;
	left: 325px;
	color: #f3c623;
}
.loader:after {
	content: counter(p) "%";
}
@keyframes p {
	90%, 100% {
		--p: 100;
	}
}
Javascript
CSS.registerProperty({
    name: "--p",
    syntax: "<integer>",
    initialValue: 0,
    inherits: true,
});