How to Add Loading Bar Like YouTube in Blogger

 

<script type='text/javascript'>//<![CDATA[ var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width= a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el, k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}(); var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100); //]]></script> </div> <div id='after-ad'></div> </div> <div class='post-share'> <ul class='supermag-pro-share-links social social-bg'> <li class='share-label'><span class='share-icon'><i class='fas fa-share-alt'></i></span></li> <li class='facebook-f has-span'><a class='facebook btn window-ify' data-height='500' data-url='https://www.facebook.com/sharer.php?u=https://techproadvice.blogspot.com/2022/04/how-to-add-loading-bar-like-youtube-in.html' data-width='520' href='javascript:;' rel='nofollow' title='Facebook'><span>Facebook</span></a></li> <li class='twitter has-span'><a class='twitter btn window-ify' data-height='520' data-url='https://twitter.com/intent/tweet?url=https://techproadvice.blogspot.com/2022/04/how-to-add-loading-bar-like-youtube-in.html&text=How to Add Loading Bar Like YouTube in Blogger' data-width='860' href='javascript:;' rel='nofollow' title='Twitter'><span>Twitter</span></a></li> <li class='whatsapp'><a class='whatsapp btn window-ify' data-height='520' data-url='https://api.whatsapp.com/send?text=How to Add Loading Bar Like YouTube in Blogger | https://techproadvice.blogspot.com/2022/04/how-to-add-loading-bar-like-youtube-in.html' data-width='860' href='javascript:;' rel='nofollow' title='WhatsApp'></a></li> <li class='linkedin'><a class='linkedin btn window-ify' data-height='520' data-url='https://www.linkedin.com/shareArticle?mini=true&url=https://techproadvice.blogspot.com/2022/04/how-to-add-loading-bar-like-youtube-in.html&title=How to Add Loading Bar Like YouTube in Blogger' data-width='860' href='javascript:;' rel='nofollow' title='LinkedIn'></a></li> <li class='pinterest-p'><a class='pinterest btn window-ify' data-height='520' data-url='https://www.pinterest.com/pin/create/button/?url=https://techproadvice.blogspot.com/2022/04/how-to-add-loading-bar-like-youtube-in.html&media=&description=How to Add Loading Bar Like YouTube in Blogger' data-width='860' href='javascript:;' rel='nofollow' title='Pinterest'></a></li> <li class='tumblr'><a class='tumblr btn window-ify' data-height='520' data-url='https://www.tumblr.com/share/link?url=https://techproadvice.blogspot.com/2022/04/how-to-add-loading-bar-like-youtube-in.html&name=How to Add Loading Bar Like YouTube in Blogger' data-width='860' href='javascript:;' rel='nofollow' title='Tumblr'></a></li> <li class='reddit'><a class='reddit btn window-ify' data-height='520' data-url='https://reddit.com/submit?url=https://techproadvice.blogspot.com/2022/04/how-to-add-loading-bar-like-youtube-in.html&title=How to Add Loading Bar Like YouTube in Blogger' data-width='860' href='javascript:;' rel='nofollow' title='Reddit'></a></li> <li class='telegram'><a class='telegram btn window-ify' data-height='520' data-url='https://telegram.me/share/url?url=https://techproadvice.blogspot.com/2022/04/how-to-add-loading-bar-like-youtube-in.html&text=How to Add Loading Bar Like YouTube in Blogger' data-width='860' href='javascript:;' rel='nofollow' title='Telegram'></a></li> <li class='email'><a class='email btn window-ify' data-height='500' data-url='mailto:?subject=How to Add Loading Bar Like YouTube in Blogger&body=https://techproadvice.blogspot.com/2022/04/how-to-add-loading-bar-like-youtube-in.html' data-width='520' href='javascript:;' rel='nofollow' title='Email'></a></li> <li class='show-hid'><a class='btn' href='javascript:;' rel='nofollow' title='Show more'></a></li> </ul> </div> </div> <footer class='post-footer'> <div id='related-wrap'> <div class='title-wrap related-title'> <span class='title'>You may like these posts</span> </div> <div class='supermag-pro-related-content'> <div class='related-tag' data-label='recent'></div> </div> </div> <div id='post-footer-ads'></div> </footer> </article> <div class='supermag-pro-blog-post-comments' data-shortcode='$type={blogger}'> <script type='text/javascript'> var disqus_shortname = "templateify-comments"; var disqus_blogger_current_url = "https://techproadvice.blogspot.com/2022/04/how-to-add-loading-bar-like-youtube-in.html"; if (!disqus_blogger_current_url.length) { disqus_blogger_current_url = "https://techproadvice.blogspot.com/2022/04/how-to-add-loading-bar-like-youtube-in.html"; } var disqus_blogger_homepage_url = "https://techproadvice.blogspot.com/"; var disqus_blogger_canonical_homepage_url = "https://techproadvice.blogspot.com/"; </script> <section class='comments threaded no-comments' data-embed='true' data-num-comments='0' id='comments'> <a name='comments'></a> <div class='comment-form'> <a name='comment-form'></a> <a href='https://www.blogger.com/comment/frame/7461539322497748124?po=3536308760230315985&hl=en&saa=85391&origin=https://techproadvice.blogspot.com' id='comment-editor-src' title='Comment Form Link'></a> <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe> <script src='https://www.blogger.com/static/v1/jsbin/2830521187-comment_from_post_iframe.js' type='text/javascript'></script> <script type='text/javascript'> BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html'); </script> </div> <a class='btn' href='javascript:;' id='show-comment-form'>Post a Comment (0)</a> </section> </div> <div class='post-nav'> <a class='post-nav-newer-link' href='https://techproadvice.blogspot.com/2022/04/how-to-display-blogger-blog-posts-in.html' id='Blog1_post-nav-newer-link'> Previous Post </a> <a class='post-nav-older-link' href='https://techproadvice.blogspot.com/2022/04/how-to-create-html-sitemap-page-in.html' id='Blog1_post-nav-older-link'> Next Post </a> </div> </div> <script type='text/javascript'> var exportify = { noTitle: "No title", postAuthor: true, authorLabel: "by", postDate: true, dateLabel: "-" } </script> </div></div> <div id='custom-ads'> <div class='section' id='supermag-pro-main-before-ad' name='Post ADS 1'><div class='widget HTML' data-version='2' id='HTML4'> <div class='widget-content'> <a class="ads-here" href="https://www.templateify.com/">Responsive Advertisement</a> </div> </div></div> <div class='section' id='supermag-pro-main-after-ad' name='Post ADS 2'><div class='widget HTML' data-version='2' id='HTML6'> <div class='widget-content'> <a class="ads-here" href="https://www.templateify.com/">Responsive Advertisement</a> </div> </div></div> </div> <div class='section' id='supermag-pro-related-posts' name='Related Posts'><div class='widget HTML' data-shortcode='$title={You might like} $results={3}' data-version='2' id='HTML101'> </div></div> <div class='section' id='supermag-pro-post-footer-ads' name='Post ADS 3'><div class='widget HTML' data-version='2' id='HTML9'> <div class='widget-content'> <script type="text/javascript"> atOptions = { 'key' : 'ea8a59fa6f5d0a8c0de904a91462aa0a', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/ea8a59fa6f5d0a8c0de904a91462aa0a/invoke.js" ></script > </div> </div></div> </main> <!-- Sidebar Wrapper --> <aside id='sidebar-wrapper'> <div class='sidebar supermag-pro-widget-ready section' id='sidebar' name='Sidebar'><div class='widget HTML' data-version='2' id='HTML10'> <div class='widget-content'> <script type="text/javascript"> atOptions = { 'key' : 'ea8a59fa6f5d0a8c0de904a91462aa0a', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/ea8a59fa6f5d0a8c0de904a91462aa0a/invoke.js" ></script > </div> </div><div class='widget LinkList' data-version='2' id='LinkList1'> <div class='widget-title title-wrap'><h3 class='title'>Follow Us</h3></div> <div class='widget-content'> <ul class='social-icons social social-bg'> <li class='facebook-f link-0'><a alt='facebook-f' class='facebook-f btn' href='https://www.facebook.com/templateify # Facebook' rel='noopener noreferrer' target='_blank' title='facebook-f'></a></li> <li class='quora link-1'><a alt='quora' class='quora btn' href='https://www.quora.com/ # Quora' rel='noopener noreferrer' target='_blank' title='quora'></a></li> <li class='youtube link-2'><a alt='youtube' class='youtube btn' href='https://www.youtube.com/c/Templateify_Blogger?sub_confirmation=1 # YouTube' rel='noopener noreferrer' target='_blank' title='youtube'></a></li> <li class='twitter link-3'><a alt='twitter' class='twitter btn' href='https://twitter.com/templateify # Twitter' rel='noopener noreferrer' target='_blank' title='twitter'></a></li> <li class='instagram link-4'><a alt='instagram' class='instagram btn' href='https://instagram.com/templateifydotcom # Instagram' rel='noopener noreferrer' target='_blank' title='instagram'></a></li> <li class='rss link-5'><a alt='rss' class='rss btn' href='https://www.templateify.com/ # RSS' rel='noopener noreferrer' target='_blank' title='rss'></a></li> </ul> </div> </div><div class='widget PopularPosts' data-version='2' id='PopularPosts3'> <div class='widget-title title-wrap'><h3 class='title'>Popular Posts</h3></div> <div class='widget-content sidebar-posts'> <div class='popular-post post big-post item-0'> <a class='entry-image-wrap is-image' href='https://techproadvice.blogspot.com/2021/04/fix-smart-card-cannot-perform-requested.html' title='Fix The smart card cannot perform the requested operation'><span class='entry-thumb' data-image='https://resources.blogblog.com/img/blank.gif'></span> </a> <div class='entry-header'> <h2 class='entry-title'><a href='https://techproadvice.blogspot.com/2021/04/fix-smart-card-cannot-perform-requested.html' title='Fix The smart card cannot perform the requested operation'>Fix The smart card cannot perform the requested operation</a></h2> </div> </div> <div class='popular-post post item-1'> <a class='entry-image-wrap is-image' href='https://techproadvice.blogspot.com/2020/06/how-to-convert-any-website-into.html' title='Convert Website Into Android App'><span class='entry-thumb' data-image='https://resources.blogblog.com/img/blank.gif'></span> </a> <div class='entry-header'> <h2 class='entry-title'><a href='https://techproadvice.blogspot.com/2020/06/how-to-convert-any-website-into.html' title='Convert Website Into Android App'>Convert Website Into Android App</a></h2> </div> </div> <div class='popular-post post item-2'> <a class='entry-image-wrap is-image' href='https://techproadvice.blogspot.com/2025/02/dropee-daily-combo-2122-february-2025.html' title='Dropee Daily Combo 21/22 February 2025'><span class='entry-thumb' data-image='https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vqecfhd-nayCXpWYUn6WAyRUCofBhyoeK_ql7KEEjIr2wg0Ero-q_KRCZ99IfQlKHJtUgyEPh-sG1fx_wOY6Z52Sl82IZaKl3hxcStT0rtQWz551k44eN-A0EqV_NdjK6aD-rxBq1dCDkLmCI-Gu2oc8cxzYCoBOy7Oij_WiB4=w72-h72-p-k-no-nu'></span> </a> <div class='entry-header'> <h2 class='entry-title'><a href='https://techproadvice.blogspot.com/2025/02/dropee-daily-combo-2122-february-2025.html' title='Dropee Daily Combo 21/22 February 2025'>Dropee Daily Combo 21/22 February 2025</a></h2> </div> </div> </div> </div><div class='widget HTML' data-version='2' id='HTML8'> <div class='widget-title title-wrap'><h3 class='title'>Smartphones</h3></div> <div class='widget-content' data-shortcode='{getWidget} $results={3} $label={Smartphone}'> </div> </div><div class='widget HTML no-style' data-version='2' id='HTML2'> <div class='widget-content'> <script type="text/javascript"> atOptions = { 'key' : 'a3134fd0a6357e4a455cf6d5ebf89ce3', 'format' : 'iframe', 'height' : 600, 'width' : 160, 'params' : {} }; </script> <script type="text/javascript" src="//www.highperformanceformat.com/a3134fd0a6357e4a455cf6d5ebf89ce3/invoke.js" ></script > </div> </div><div class='widget HTML' data-version='2' id='HTML5'> <div class='widget-title title-wrap'><h3 class='title'>Comments</h3></div> <div class='widget-content' data-shortcode='{getWidget} $results={3} $label={comments}'> </div> </div><div class='widget Label' data-version='2' id='Label2'> <div class='widget-title title-wrap'><h3 class='title'>Main Tags</h3></div> <div class='widget-content cloud-label'> <ul class='cloud-style'> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/Bitcoin'>Bitcoin</a></li> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/Chrome'>Chrome</a></li> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/Code%20%26%20Scripts'>Code & Scripts</a></li> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/Cricket'>Cricket</a></li> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/Cryptocurrency'>Cryptocurrency</a></li> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/Excel'>Excel</a></li> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/Fix%20Error'>Fix Error</a></li> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/Forex%20Markets'>Forex Markets</a></li> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/Gmail'>Gmail</a></li> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/Make%20Money'>Make Money</a></li> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/MS%20Word'>MS Word</a></li> <li><a class='label-name btn' href='https://techproadvice.blogspot.com/search/label/Windows%2010'>Windows 10</a></li> </ul> </div> </div></div> </aside> </div> </div> <!-- Footer Ads --> <div class='flex-center' id='footer-ads-wrap'> <div class='footer-ads container row-x1 section' id='footer-ads' name='Footer ADS'><div class='widget HTML' data-version='2' id='HTML3'> <div class='widget-content'> <a class="ads-here" href="https://www.templateify.com/">Responsive Advertisement</a> </div> </div></div> </div> <!-- Footer Wrapper --> <footer id='footer-wrapper'> <div class='primary-footer flex-center'> <div class='container row-x1'> <div class='supermag-pro-about-section section' id='supermag-pro-about-section' name='About Section'><div class='widget Image' data-version='2' id='Image100'> <a class='footer-logo custom-image' href='/'> <img alt='TechPro Technology Blogger Template' id='Image100_img' src='//1.bp.blogspot.com/-06-ovc42UAM/X71W5USkSlI/AAAAAAAACw4/zXLsWcJiz78xg4AwDbzofYxWHyPIOG8MwCK4BGAYYCw/s1600/supermag-white.png'/> </a> <div class='footer-info'> <h3 class='title'>About Us</h3> <p class='image-caption excerpt'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p> </div> </div><div class='widget LinkList' data-version='2' id='LinkList103'> <ul class='social-icons social social-bg'> <li class='facebook-f link-0'><a alt='facebook-f' class='facebook-f btn' href='https://www.facebook.com/templateify' rel='noopener noreferrer' target='_blank' title='facebook-f'></a></li> <li class='twitter link-1'><a alt='twitter' class='twitter btn' href='https://twitter.com/templateify' rel='noopener noreferrer' target='_blank' title='twitter'></a></li> <li class='youtube link-2'><a alt='youtube' class='youtube btn' href='https://www.youtube.com/c/Templateify_Blogger' rel='noopener noreferrer' target='_blank' title='youtube'></a></li> <li class='instagram link-3'><a alt='instagram' class='instagram btn' href='https://www.instagram.com/templateifydotcom/' rel='noopener noreferrer' target='_blank' title='instagram'></a></li> <li class='rss link-4'><a alt='rss' class='rss btn' href='https://www.templateify.com/' rel='noopener noreferrer' target='_blank' title='rss'></a></li> </ul> </div></div> </div> </div> <div class='footerbar flex-center'> <div class='container row-x1'> <div class='footer-copyright section' id='footer-copyright' name='Footer Copyright'><div class='widget Text' data-version='2' id='Text101'> Customized by - <a href="https://barkateraza.in/" rel="noopener noreferrer" target="_blank">barkateraza.in</a> </div></div> <div class='footer-menu section' id='footer-menu' name='Footer Menu'><div class='widget LinkList' data-version='2' id='LinkList104'> <ul class='link-list list-style'> <li><a href='/'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Contact Us</a></li> <li><a href='#'>RTL Version</a></li> </ul> </div></div> </div> </div> </footer> <!-- Cookie Consent --> <div id='supermag-cookie-ify'> <div class='section' id='supermag-cookie-ify-section' name='Cookie Consent'><div class='widget Text' data-shortcode='$ok={Accept !} $days={7}' data-version='2' id='Text1'> <p class='supermag-cookie-ify-content excerpt'>Our website uses cookies to improve your experience. <a href="#">Learn more</a></p> <a class='btn' href='javascript:;' id='supermag-cookie-ify-accept' role='button' title='Ok'>Ok</a> </div></div> </div> </div> <!-- Mobile Menu and Back Top --> <div id='slide-menu'> <div class='slide-menu-header'> <div class='mobile-search'> <form action='https://techproadvice.blogspot.com/search' class='search-form' role='search'> <input autocomplete='off' class='search-input' name='q' placeholder='Search' type='search' value=''/> <button class='search-action' type='submit' value=''></button> </form> </div> <div class='mobile-toggle-wrap'> <a class='hide-supermag-pro-mobile-menu' href='javascript:;' role='button'></a> </div> </div> <div class='slide-menu-flex'> <div class='supermag-pro-mobile-menu' id='supermag-pro-mobile-menu'></div> <div class='mobile-menu-footer'> <div class='mobile-topbar-social social-bg'></div> <div class='mobile-topbar-menu'></div> </div> </div> </div> <div class='overlay'></div> <a class='btn' href='javascript:;' id='back-top' role='button' title='Back To Top'></a> <!-- Hidden Widgets --> <div id='hidden-widgets-wrap' style='display:none'> <div class='hidden-widgets section' id='hidden-widgets'><div class='widget ContactForm' data-version='2' id='ContactForm1'> <div class='widget-title'><h3 class='title'>Contact Form</h3></div> <div class='widget-content contact-form-widget'> <div class='form'> <form name='contact-form'> <input ariby='Name' class='contact-form-name' id='ContactForm1_contact-form-name' name='name' placeholder='Name' size='30' type='text' value=''/> <input ariby='Email *' class='contact-form-email' id='ContactForm1_contact-form-email' name='email' placeholder='Email *' size='30' type='text' value=''/> <textarea ariby='Message *' class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' placeholder='Message *' rows='5'>