<style>/*<!--<head>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=d1948a70-e851-4fb6-9253-113ed30c4f99' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=d1948a70-e851-4fb6-9253-113ed30c4f99' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1633184471074840&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-1633184471074840 -->

</head>--></head><body data-lang='default' data-theme='default' id='nB'>*/</style>

How to show a running progress bar while page is loading

Anupam October 14, 2022 - 1 min read

Hi Guys, today we will see how to create a simple web page running progress bar using javascript. Progress Bar is used to track the progress of the current process it can be used anywhere like file upload process,page load process etc.

It really matters how your website pages load and are presented to users.

In this tutorial we will create and display progress bar while page is loading using jQuery and CSS.

Description:

a beautiful super lightweight progress indicator for your page load.This progress Bar using CSS 3 gradients, with a touch of animation.

How can I show progress bar while page is loading?

Make a HTML file and define markup for progress bar.
Make a js file and define scripting for progress bar.
Make a CSS file and define styling for progress bar.

Download Source & watch Demo and full tutorial

Watch Demo Download

If you think this tutorial is helpful then please consider sharing it with your friends and Please subscribe our youtube channel.

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3576124627-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY71V9jBR87GYpMf9td379uMWzdtOA:1726829543066';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2059347577744616049','//anutrickz.blogspot.com/2022/10/javascript-running-progressbar.html','2059347577744616049');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2059347577744616049', 'title': 'ANUTRICKZ', 'url': 'https://anutrickz.blogspot.com/2022/10/javascript-running-progressbar.html', 'canonicalUrl': 'https://anutrickz.blogspot.com/2022/10/javascript-running-progressbar.html', 'homepageUrl': 'https://anutrickz.blogspot.com/', 'searchUrl': 'https://anutrickz.blogspot.com/search', 'canonicalHomepageUrl': 'https://anutrickz.blogspot.com/', 'blogspotFaviconUrl': 'https://anutrickz.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-TS2WXBJ1XV', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': false, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22ANUTRICKZ - RSS\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2059347577744616049/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/8283608089641766067/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1633184471074840', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/bea942728df245a5', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Continue Reading \xbb', 'pageType': 'item', 'postId': '8283608089641766067', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcjYIJsoN44zVTyAET4T9gBE697SsrWyaF6Kekt9S2C6NoaCp40Nn_l2G0Y1hO3B9L2-PtP6F6HxCiC0TrVot_TV3KCkQkrotMLcgYcrCum-ZgsvRQFFvYOL_HDaLerzb_u65lV6WwQli0v5rUHrGX0SIruceFc-8EyPtQZ-7nwykyDxh1XSeM4VW/s72-w640-c-h360/page%20loading%20Progress%20bar%20javascript%20.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcjYIJsoN44zVTyAET4T9gBE697SsrWyaF6Kekt9S2C6NoaCp40Nn_l2G0Y1hO3B9L2-PtP6F6HxCiC0TrVot_TV3KCkQkrotMLcgYcrCum-ZgsvRQFFvYOL_HDaLerzb_u65lV6WwQli0v5rUHrGX0SIruceFc-8EyPtQZ-7nwykyDxh1XSeM4VW/w640-h360/page%20loading%20Progress%20bar%20javascript%20.png', 'pageName': 'How to show a running progress bar while page is loading', 'pageTitle': 'ANUTRICKZ: How to show a running progress bar while page is loading', 'metaDescription': 'show loader until page loads javascript.page loader javascript,Display a loading bar before the entire page is loaded,How to show Page Loading div unt'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How to show a running progress bar while page is loading', 'description': 'show loader until page loads javascript.page loader javascript,Display a loading bar before the entire page is loaded,How to show Page Loading div unt', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcjYIJsoN44zVTyAET4T9gBE697SsrWyaF6Kekt9S2C6NoaCp40Nn_l2G0Y1hO3B9L2-PtP6F6HxCiC0TrVot_TV3KCkQkrotMLcgYcrCum-ZgsvRQFFvYOL_HDaLerzb_u65lV6WwQli0v5rUHrGX0SIruceFc-8EyPtQZ-7nwykyDxh1XSeM4VW/w640-h360/page%20loading%20Progress%20bar%20javascript%20.png', 'url': 'https://anutrickz.blogspot.com/2022/10/javascript-running-progressbar.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 8283608089641766067}}, {'name': 'widgets', 'data': [{'title': 'ANUTRICKZ (Header)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'postContent', 'id': 'Blog1', 'posts': [{'id': '8283608089641766067', 'title': 'How to show a running progress bar while page is loading', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcjYIJsoN44zVTyAET4T9gBE697SsrWyaF6Kekt9S2C6NoaCp40Nn_l2G0Y1hO3B9L2-PtP6F6HxCiC0TrVot_TV3KCkQkrotMLcgYcrCum-ZgsvRQFFvYOL_HDaLerzb_u65lV6WwQli0v5rUHrGX0SIruceFc-8EyPtQZ-7nwykyDxh1XSeM4VW/w640-h360/page%20loading%20Progress%20bar%20javascript%20.png', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'timestamp', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}, {'title': 'Popular posts', 'type': 'PopularPosts', 'sectionId': 'popular', 'id': 'PopularPosts2', 'posts': [{'title': 'How To Add Custom Google Translate Button On Your Website?', 'id': 5371994812086292964}, {'title': ' Anti Adblock Script for blogger | How to Add Adblock detection script [ 2022 ] ', 'id': 9130507176988353748}, {'title': '[ UPDATED ] How To Add Copy And Share Buttons In Blockquotes', 'id': 4111069201761851050}, {'title': 'How To Add Custom Google Translate Button On your Website?', 'id': 6486639804398665261}, {'title': 'How to Create Automatic Safelinks on Blogger\x27s Main Blog', 'id': 4387528619928926608}]}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'postContent', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts2', 'popular', document.getElementById('PopularPosts2'), {}, 'displayModeFull'));
</script>
</body>*/</style>

Description:

How can I show progress bar while page is loading?

Download Source & watch Demo and full tutorial

How To Add Custom Google Translate Button On Your Website?

Anti Adblock Script for blogger | How to Add Adblock detection script [ 2022 ]

[ UPDATED ] How To Add Copy And Share Buttons In Blockquotes

How To Add Custom Google Translate Button On your Website?

How to Create Automatic Safelinks on Blogger's Main Blog