JavaScript Loading Page

 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Page</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffffff;
color: #0039d7;
font-family: Arial, sans-serif;
}

.loader {
text-align: center;
}

.progress-bar {
width: 800px;
height: 40px;
background-color: #ffffff;
border-radius: 20px;
margin-top: 20px;
box-shadow: inset 0 0 10px #000000;
}

.progress-fill {
height: 40px;
width: 0%;
background-color: #4caf50;
border-radius: 20px;
transition: width 0.2s;
}

.percentage {
font-size: 34px;
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="loader">
<div class="percentage">0%</div>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
</div>
<script>
const percentageText = document.querySelector('.percentage');
const progressFill = document.querySelector('.progress-fill');

let progress = 0;

// Simulate loading process
const interval = setInterval(() => {
if (progress >= 100) {
clearInterval(interval);
// Optionally, navigate to a new page or hide the loader
setTimeout(() => {
// Redirect to a page when loading 100%
window.location.href = "main-page.html";
}, 500);
} else {
progress += 1;
percentageText.textContent = `${progress}%`;
progressFill.style.width = `${progress}%`;
}
}, 50); // Adjust the speed here (50ms for smooth update)
</script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

ការសរសេរ JavaScript ចូលក្នុង Web Page

Image
កម្មវិធី Web Browser ត្រូវបានបង្កើតឡើងដើម្បីអាចស្គាល់ភាសា HTML និង CSS ហើយបកប្រែភាសាទាំងនោះទៅជាទម្រង់ដែលអាចអាន និងបង្ហាញបាន។ Web Browser ភាគច្រើនគឺមានភ្ជាប់    កម្មវិធីបកប្រែភាសា JavaScript មកស្រាប់ ដូច្នេះវាស្គាល់ភាសានេះ ហើយអាចដំណើរការបាន ។ ដើម្បីសរសេរ JavaScript អ្នកត្រូវមានកម្មវិធី Text Editor ណាមួយមានដូចជា Notepad, Notepad++, NetBeans, Visual Studio,... ។ ជាទូទៅ File របស់ JavaScript មានកន្ទុយ (Extension) *.js ។ គេអាចសរសេរកូដ JavaScript នៅក្នុងចន្លោះ <body> ឬ <head> នៃ HTML Structure ដែលកូដទាំងអស់នោះត្រូវស្ថិតនៅក្នុងចន្លោះ Tag បើក និងបិទ <script>...</script> ហើយពេលខ្លះយើងឃើញគេសរសេរ <script type=”text/javascript”>...</script> វាមិនមានអ្វីខុសគ្នាអីនោះទេ។ ពាក្យ type=”text/javascript” គ្រាន់តែវាបញ្ជាក់ពី Script សរសេរដោយប្រើ Text ធម្មតា ។ ================================================ <script>            write JavaScript here…  </script> ================================================...
Read more

Create Pop up Form in JavaScript

Image
  <!DOCTYPE html > <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <title> Pop-Up Form </title> <style> /* Basic styles for the page */ body { font-family : Arial , sans-serif ; margin : 0 ; padding : 0 ; box-sizing : border-box ; } /* Overlay background */ .modal-overlay { display : none ; position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : rgba( 0 , 0 , 0 , 0.5 ); z-index : 1000 ; } /* Modal box */ .modal { position : fixed ; top : 50% ; left : 50% ; transform : translate( -50% , -50% ); background :...
Read more

ការប្រើ Switch ក្នុង JavaScript

Image
  switch គឺជា Statement លក្ខខណ្ឌមួយដែលប្រើសម្រាប់ចាប់យកបណ្តុំកូដរបស់ case មួយក្នុងចំណោម case ជាច្រើនមកដំណើរការ តាមរយៈការផ្ទៀងផ្ទាត់ជាមួយ expression ដែលត្រូវគ្នា ។ --------------------------------------------------------------------------------------------- switch ( expression ) {      case value1:           code block           break;      case value2:           code block           break;      case value3:           code block           break;      ...      default:           default code block } --------------------------------------------------------------------------------------------- expression ប្រើសម្រាប់យកទៅប្រៀបធៀបជាមួយនឹង case នីមួយៗ បើត្រូវជាមួយ case ណាមួយ វានឹងចាប់យកកូដរបស់ case នោះមកដំណើរ...
Read more