How to Show a Running Progress Bar while Page is Loading
Hi to all, in this article I am going to tell you all about how to show a running progress bar while page is loading easily in just few minutes.
So, read the below provided steps carefully and completely to get clear understanding about showing running progress bar while page is loading easily wiothout any error or issues.
Steps to Show Running Progress Bar in Blogger
Login to Blogger Dashboard
First of all you need to visit official blogger website and click on login.
Now you need to sign-in to your blogger website dashboard by using your login credentials carefully.
Backup Blogger Theme
After login to blogger dashboard, now you need to backup your blogger theme for future use, if any error or issue occurred while saving the code inside your theme editor then you can restore your backup code again and run your website as usual and if you want to backup blogger theme then follow below path.
Path: Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download -> Verify captcha -> Save the downloaded file in a safe place for future use.
Open Blogger Theme Editor
After backup of your blogger theme, now you need to open blogger theme editor to add simple codes inside it and to open it you can follow below provided path.
Path: Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.
Adding HTML
- Open blogger theme editor
- Search for <body> tag or open body tag.
- Now copy below provided HTML code.
- paste the copied HTML code just below <body> tag.
<div class='progress' id='PreLoaderBar'> <div class='indeterminate'/> </div>
Adding CSS
- Open blogger theme editor
- Search for closing head tag or </head> tag.
- Copy below provided CSS code.
- Paste the copied CSS code just above </head> tag.
<style> .progress { position: relative; height: 2px; display: block;z-index: 9999; width: 100%; background-color: white; border-radius: 2px; background-clip: padding-box; /*margin: 0.5rem 0 1rem 0;*/ overflow: hidden; } .progress .indeterminate { background-color:black; } .progress .indeterminate:before { content: ''; position: absolute; background-color: #2C67B1; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .progress .indeterminate:after { content: ''; position: absolute; background-color: #2C67B1; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; -webkit-animation-delay: 1.15s; animation-delay: 1.15s; } @-webkit-keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @-webkit-keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } @keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } </style>
Adding JavaScript
- Open blogger theme editor
- Search for closing body tag or </body> tag.
- Now copy below provided JavaScript code.
- Paste the copied JavaScript code just above </body> tag.
<script> //<![CDATA[ document.onreadystatechange = function () { if (document.readyState === "complete") { console.log(document.readyState); document.getElementById("PreLoaderBar").style.display = "none"; } } //]]></script>
Conclusion
I hope that you all have understood about showing running progress bar while page is loading by using JavaScript easily in just few minutes.
