diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..476ac19 --- /dev/null +++ b/src/index.html @@ -0,0 +1,18 @@ + + + + + + Countdown Loading Bar + + + +
+ +
+
+
+
+ + + diff --git a/src/script.js b/src/script.js new file mode 100644 index 0000000..05b282d --- /dev/null +++ b/src/script.js @@ -0,0 +1,29 @@ +document.addEventListener('DOMContentLoaded', function () { + const targetDate = new Date('2025-06-30T00:00:00').getTime(); // Set your target date here + const loadingBar = document.getElementById('loading-bar'); + const dateDisplay = document.getElementById('date-display'); + + function updateLoadingBar() { + const now = new Date().getTime(); + const distance = targetDate - now; + const progress = Math.max(0, Math.min(100, ((now - new Date('2025-05-05T00:00:00').getTime()) / (targetDate - new Date('2025-05-05T00:00:00').getTime())) * 100)); + + loadingBar.innerHTML = `
${progress.toFixed(10)}%
`; + + const days = Math.floor(distance / (1000 * 60 * 60 * 24)); + const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((distance % (1000 * 60)) / 1000); + + dateDisplay.innerHTML = `Back in : ${days}d ${hours}h ${minutes}m ${seconds}s`; + + if (distance < 0) { + clearInterval(countdownInterval); + dateDisplay.innerHTML = 'Countdown completed!'; + } + } + + const countdownInterval = setInterval(updateLoadingBar, 1000); + updateLoadingBar(); // Initial call to set the loading bar immediately +}); + diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..201fb27 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,38 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; +} + +.container { + text-align: center; +} + +.loading-bar { + width: 100%; + background-color: #ddd; + border-radius: 5px; + overflow: hidden; +} + +.loading-bar div { + height: 30px; + width: 0; + background-color: #4caf50; + text-align: center; + line-height: 30px; + color: black; + border-radius: 5px; +} + +.date-display { + margin-top: 20px; + font-size: 1.2em; +} + +.catually { + margin-bottom: 20px; +}