.fundraiser-container { background-color: #ccccea; /* Light green */ padding: 15px; border-radius: 10px; max-width: 600px; margin: 20px auto; text-align: center; } .fundraiser-info { display: flex; justify-content: space-between; font-size: 18px; font-weight: bold; color: #2e2e2e; padding: 5px 10px; } .progress-bar { width: 100%; background-color: #5C5BA8; /* Light green shade */ height: 10px; border-radius: 10px; overflow: hidden; margin-top: 10px; } .progress-fill { height: 100%; background-color: #259c4c; /* Dark green */ width: 0%; transition: width 1.5s ease-in-out; } document.addEventListener("DOMContentLoaded", function() { let goalAmount = 5000; // Set the total goal let raisedAmount = 1500; // Set the currently raised amount let percentage = (raisedAmount / goalAmount) * 100; document.getElementById("progressFill").style.width = percentage + "%"; });