{"id":187,"date":"2016-07-04T20:52:27","date_gmt":"2016-07-04T23:52:27","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=187"},"modified":"2016-07-04T21:04:22","modified_gmt":"2016-07-05T00:04:22","slug":"como-criar-uma-barra-de-loading-igual-a-do-youtube-com-javascript","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/como-criar-uma-barra-de-loading-igual-a-do-youtube-com-javascript\/","title":{"rendered":"Como adicionar uma barra de loading igual a do YouTube com JavaScript"},"content":{"rendered":"<p>\u00c9 muito simples adicionar uma barra de loading igual a do YouTube, basta utilizar o plugin pace.js criado pela HubSpot.<\/p>\n<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/07\/barra-de-loading.png\" alt=\"Como criar uma barra de loading igual a do YouTube com JavaScript\" \/>\n<p>Confira na aula gratuita do curso de UX Design: <a href=\"https:\/\/www.origamid.com\/aula\/2-8-pratica-loading-de-pagina\/\">https:\/\/www.origamid.com\/aula\/2-8-pratica-loading-de-pagina\/<\/a><\/p>\n<p>Acesse o reposit\u00f3rio do plugin no GitHub em <a href=\"https:\/\/github.com\/HubSpot\/pace\/\" target=\"_blank\">https:\/\/github.com\/HubSpot\/pace\/<\/a><\/p>\n<p>Voc\u00ea precisa apenas baixar o arquivo pace.min.js e escolher o tema do loading dentro da pasta themes no reposit\u00f3rio.<\/p>\n<p>Adicione o arquivo pace.min.js ao seu projeto com:<\/p>\n<pre><code class=\"html\">&lt;script src=\"js\/pace.min.js\"\\&gt;&lt;\/script&gt;\n<\/code><\/pre>\n<p>E adicione o CSS do tema. Exemplo de CSS do tema m\u00ednimo (igual ao do youtube):<\/p>\n<pre><code class=\"language-css\">\n.pace {\n  -webkit-pointer-events: none;\n  pointer-events: none;\n\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.pace-inactive {\n  display: none;\n}\n\n.pace .pace-progress {\n  background: #8844ee;\n  position: fixed;\n  z-index: 2000;\n  top: 0;\n  right: 100%;\n  width: 100%;\n  height: 2px;\n}\n<\/code><\/pre>\n<p>Voc\u00ea pode alterar o background para a cor que preferir, assim como o height da barra de loading tamb\u00e9m.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00c9 muito simples adicionar uma barra de loading igual a do YouTube, basta utilizar o plugin pace.js criado pela HubSpot. Confira na aula gratuita do curso de UX Design: https:\/\/www.origamid.com\/aula\/2-8-pratica-loading-de-pagina\/ Acesse o reposit\u00f3rio do plugin no GitHub em https:\/\/github.com\/HubSpot\/pace\/ Voc\u00ea precisa apenas baixar o arquivo pace.min.js e escolher o tema do loading dentro da pasta [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/187"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=187"}],"version-history":[{"count":14,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/187\/revisions"}],"predecessor-version":[{"id":202,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/187\/revisions\/202"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}