How to install stylish loading progress bar on blogger

Hi in this tutorial I will tell you how to install a loading progress bar on blogger. The progress bar gives a dem look on any blog. One of Techno Mania visit comments on my post "How to install stylish loading progress bar on blogger like your blog". So let's follow all steps carefully of this post.

Fast go to theme then Edit HTML. Now serach for ]]></skin> tag then add the below code after ]]></skin> tag.

.progress {position: fixed; height: 3px; top: 0; display: block; width: 100%; background-color: rgba(26, 115, 232, 0.2); border-radius: 2px; overflow: hidden; z-index: 999; } .progress .indeterminate {background-color: rgba(255, 255, 255, 0.8); } .progress .indeterminate:before {content: ""; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .progress .indeterminate:after {content: ""; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; will-change: left, right; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation-delay: 1.15s; } @keyframes indeterminate {0% {left: -35%; right: 100%; } 60% {left: 100%; right: -90%; } 100% {left: 100%; right: -90%; } } @keyframes indeterminate-short {0% {left: -200%; right: 100%; } 60% {left: 107%; right: -8%; } 100% {left: 107%; right: -8%; } }

Now search for </body> tag and add the below code after </body> tag.

<script>$(".progress").fadeOut(6000, function() { $(this).remove(); });</script>

Now search for </head> tag and add the below code before </head> tag.

<div class='progress'><div class='indeterminate'></div></div>

Now save the theme and enjoy it. Please tell us the same topic about the new post on the comment box. Thanks for reading this post😋.