Progressbar

mlk

by downedcrane

HTML

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>

<body style="width: 100%; background-color: black; margin: auto; height: auto;">
<div style="width: 80%; background-color: black; margin: auto;">
<div class="donationbar donationbarbody" style="background-color: black;">
<p style="font-size:30px; font-weight: 700;">
поддержите moloko plus!
</p>
<p style="font-size:15px; font-weight: 400;">
регулярные пожертвования позволяют издавать moloko plus и не зависеть от рекламодателей, грантов и государства
</p>
<p id="donationtext">
собрано 30000 рублей из 70000
</p>
<div class="donationbar donationsum" id="donationsum">
42%
</div>
<div class="skillbar">
  <div class="donationbar totalbar" id="donationbar"></div>
</div>
</div>
</div>
</body>


<script>
function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}
var dsum = httpGet("https://raw.githubusercontent.com/DownedCrane/etc/main/sum");
console.log(dsum);
var donationbar_sum = dsum;

var donationbar_percent = Math.round(donationbar_sum/70000*100);
if (donationbar_sum > 70000){donationbar_percent = 100;}
	
// Get the root element
var r = document.querySelector('.totalbar');
r.style.setProperty('width', donationbar_percent+"%");

document.getElementById("donationsum").innerHTML = donationbar_sum + "₽"
document.getElementById("donationtext").innerHTML = "собрано " + donationbar_sum + " рублей из 70000, или " + donationbar_percent + "%"
</script>
<style>
.skillbar {
  width: 100%; /* Full width */
  height: 40px;
  text-align: right;
  border: 1px solid white;
  
}

.donationbar {
  text-align: right; /* Right-align text */
  height: 100%;
  background-color: black;
}
.donationsum {
  text-align: right; /* Right-align text */
 
  color: white; /* White text color */
  height: 100%;
  background-color: black;
}
/* Green */
.donationbarbody {
 ...