<!DOCTYPE html>
<html>
<style>
#myProgress {
width: 100%;
height: 20px;
background-color: #ddd;
}
#myBar {
width: 0%;
height: 100%;
background-color: #04AA6D;
}
#myText {
width: 100%;
height: 100%;
text-align: center;
color: #e20909;
position: absolute;
}
</style>
<body>
<h3>прошло времени в текущем месяце</h3>
<div id="myProgress">
<div id="myText">0%</div>
<div id="myBar"> </div>
</div>
<script>
let point=10000000
move()
setInterval(() => move(), 100);
function move() {
let date = new Date(), y = date.getFullYear(), m = date.getMonth();
let firstDay = new Date(y, m, 1);
let lastDay = new Date(y, m + 1, 1);
let precents=100*(date-firstDay)/(lastDay-firstDay)
document.getElementById("myBar").style.width = precents + "%";
document.getElementById("myText").innerText=`${Math.floor(precents)}% или ${Math.floor(point*precents/100)} из ${point} условных интервалов`
}
</script>
</body>
</html>