Hello everyone, in this article we are going to show you, how to add a youtube type loading bar to your website using css,HTML and javascript code, so here is very simple to add youtube type loading bar, you can use simple css and javascript code you existing website , so no more discussion and let’s start.<\/p>\n
\r\n#progress {\r\nposition: fixed;\r\nz-index: 2147483647;\r\ntop: 0;\r\nleft: -6px;\r\nwidth: 0%;\r\nheight: 2px;\r\nbackground: #b91f1f;\r\n-moz-border-radius: 1px;\r\n-webkit-border-radius: 1px;\r\nborder-radius: 1px;\r\n-moz-transition: width 500ms ease-out,opacity 400ms linear;\r\n-ms-transition: width 500ms ease-out,opacity 400ms linear;\r\n-o-transition: width 500ms ease-out,opacity 400ms linear;\r\n-webkit-transition: width 500ms ease-out,opacity 400ms linear;\r\ntransition: width 500ms ease-out,opacity 400ms linear\r\n}\r\n#progress.done {\r\nopacity: 0\r\n}\r\n#progress dd,#progress dt {\r\nposition: absolute;\r\ntop: 0;\r\nheight: 2px;\r\n-moz-box-shadow: #b91f1f 1px 0 6px 1px;\r\n-ms-box-shadow: #b91f1f 1px 0 6px 1px;\r\n-webkit-box-shadow: #b91f1f 1px 0 6px 1px;\r\nbox-shadow: #b91f1f 1px 0 6px 1px;\r\n-moz-border-radius: 100%;\r\n-webkit-border-radius: 100%;\r\nborder-radius: 100%\r\n}\r\n#progress dd {\r\nopacity: 1;\r\nwidth: 20px;\r\nright: 0;\r\nclip: rect(-6px,22px,14px,10px)\r\n}\r\n#progress dt {\r\nopacity: 1;\r\nwidth: 180px;\r\nright: -80px;\r\nclip: rect(-6px,90px,14px,-6px)\r\n}\r\n@-moz-keyframes pulse {\r\n30% {\r\nopacity: 1\r\n}\r\n60% {\r\nopacity: 0\r\n}\r\n100% {\r\nopacity: 1\r\n}\r\n}\r\n@-ms-keyframes pulse {\r\n30% {\r\nopacity: .6\r\n}\r\n60% {\r\nopacity: 0\r\n}\r\n100% {\r\nopacity: .6\r\n}\r\n}\r\n@-o-keyframes pulse {\r\n30% {\r\nopacity: 1\r\n}\r\n60% {\r\nopacity: 0\r\n}\r\n100% {\r\nopacity: 1\r\n}\r\n}\r\n@-webkit-keyframes pulse {\r\n30% {\r\nopacity: .6\r\n}\r\n60% {\r\nopacity: 0\r\n}\r\n100% {\r\nopacity: .6\r\n}\r\n}\r\n@keyframes pulse {\r\n30% {\r\nopacity: 1\r\n}\r\n60% {\r\nopacity: 0\r\n}\r\n100% {\r\nopacity: 1\r\n}\r\n}\r\n#progress.waiting dd,#progress.waiting dt {\r\n-moz-animation: pulse 2s ease-out 0s infinite;\r\n-ms-animation: pulse 2s ease-out 0s infinite;\r\n-o-animation: pulse 2s ease-out 0s infinite;\r\n-webkit-animation: pulse 2s ease-out 0s infinite;\r\nanimation: pulse 2s ease-out 0s infinite\r\n}\r\n<\/code><\/pre>\n#02 JavaScript Code<\/h2>\n\r\n<script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"><\/script>\r\n$( document ).ready(function() {\r\n$({property: 0}).animate({property: 105}, {\r\nduration: 4000,\r\nstep: function() {\r\nvar _percent = Math.round(this.property);\r\n$('#progress').css('width', _percent+\"%\");\r\nif(_percent == 105) {\r\n$(\"#progress\").addClass(\"done\");\r\n}\r\n},\r\ncomplete: function() {\r\n}\r\n});\r\n});\r\n<\/code><\/pre>\n#03 HTML Code<\/h2>\n\r\n<div id=\"progress\" class=\"waiting\">\r\n<dt><\/dt>\r\n<dd><\/dd>\r\n<\/div>\r\n<\/code><\/pre>\nWe have already tested this code in our website See Live Demo<\/a>,if any problems and not working this code please write your problems in comment box below.<\/p>\nConclusion<\/h2>\n
We hope this article helped you to\u00a0 How To Add a YouTube Like Loading Bar to Your Website<\/strong>. You may also want to see \u2013 Best Cloud Hosting Providers<\/a>.<\/p>\nIf you liked this article, then please share to social networking site. You can also find us on Twitter<\/a>,Facebook<\/a> and Instagram<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"Hello everyone, in this article we are going to show you, how to add a youtube type loading bar to your website using css,HTML and javascript code, so here is very simple to add youtube type loading bar, you can use simple css and javascript code you existing website , so no more discussion and … Continue reading “How To Add a YouTube Like Loading Bar to Your Website Using HTML,CSS and JavaScript?”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":11101,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[224],"class_list":["post-494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-css-and-javascript"],"featured_image_src":"https:\/\/veewom.com\/articles\/wp-content\/uploads\/2017\/02\/lo.png","author_info":{"display_name":"Editorial Staff","author_link":"https:\/\/veewom.com\/articles\/author\/admin"},"_links":{"self":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts\/494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/comments?post=494"}],"version-history":[{"count":1,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts\/494\/revisions"}],"predecessor-version":[{"id":12619,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/posts\/494\/revisions\/12619"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/media\/11101"}],"wp:attachment":[{"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/media?parent=494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/categories?post=494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/veewom.com\/articles\/wp-json\/wp\/v2\/tags?post=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}