{"id":94,"date":"2015-04-16T20:38:19","date_gmt":"2015-04-16T20:38:19","guid":{"rendered":"http:\/\/wjharil.com\/blog\/?p=94"},"modified":"2015-10-16T22:45:55","modified_gmt":"2015-10-16T22:45:55","slug":"preloader-usando-css-y-jquery","status":"publish","type":"post","link":"https:\/\/wjharil.com\/blog\/preloader-usando-css-y-jquery\/","title":{"rendered":"Simple preloader usando CSS y Jquery"},"content":{"rendered":"<p>Primero, vamos a definir qu\u00e9 es un <strong>preloader<\/strong>: una imagen o texto, que se muestra <strong>durante la carga de archivos<\/strong> que se usan en una p\u00e1gina web y que luego desaparece al cargarse totalmente dichos archivos e im\u00e1genes.<\/p>\n<p>Existen muchos<strong> plugins de preoladers<\/strong> que podemos encontrar en la red, y todos ellos muy buenos. Pero qu\u00e9 pasar\u00eda si necesitamos un <strong>simple c\u00f3digo <\/strong>que no tenga necesidad de mucho m\u00e1s que s\u00f3lo su funci\u00f3n de mostrar el contenido una vez que se haya cargado completamente la web.<\/p>\n<p>Para ello, usaremos jQuery 1.6+ y \u00e9ste <strong>sencillo javascript<\/strong>, que podemos agregar en el header o footer:<\/p>\n<pre class=\"lang:js decode:true \">$(window).load(function(){\r\n    $('#page-loader').fadeOut(500);\r\n});<\/pre>\n<p>Como podemos ver, en el con \u00e9stas <em>3 l\u00edneas de javascript<\/em>, ya tendr\u00edamos practicamente todo hecho, a excepci\u00f3n que falta estilizar para que se vea bien nuestro <em>preloader<\/em> y agregar a nuestro html el siguiente c\u00f3digo debajo de la etiqueta &lt;body&gt;.<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div id=\"page-loader\"&gt;&lt;span class=\"preloader-interior\"&gt;&lt;\/span&gt;&lt;\/div&gt;<\/pre>\n<p>Una vez teniendo esto listo, procedemos a crear la hoja de estilos, el cu\u00e1l se llamara \u00ab<strong>css.css\u00bb<\/strong> que tendr\u00e1 los estilos del id \u00abpage-loader\u00bb:<\/p>\n<pre class=\"lang:css decode:true\">#page-loader {\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tz-index: 1000;\r\n\tbackground: #FFF none repeat scroll 0% 0%;\r\n\tz-index: 99999;\r\n}\r\n#page-loader .preloader-interior {\r\n    display: block;\r\n    position: relative;\r\n    left: 50%;\r\n    top: 50%;\r\n    width: 150px;\r\n    height: 150px;\r\n    margin: -75px 0 0 -75px;\r\n    border-radius: 50%;\r\n    border: 3px solid transparent;\r\n    border-top-color: #3498db;\r\n\r\n    -webkit-animation: spin 2s linear infinite; \/* Chrome, Opera 15+, Safari 5+ *\/\r\n          animation: spin 2s linear infinite; \/* Chrome, Firefox 16+, IE 10+, Opera *\/\r\n}\r\n#page-loader .preloader-interior:before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 5px;\r\n    left: 5px;\r\n    right: 5px;\r\n    bottom: 5px;\r\n    border-radius: 50%;\r\n    border: 3px solid transparent;\r\n    border-top-color: #e74c3c;\r\n\r\n    -webkit-animation: spin 3s linear infinite; \/* Chrome, Opera 15+, Safari 5+ *\/\r\n      animation: spin 3s linear infinite; \/* Chrome, Firefox 16+, IE 10+, Opera *\/\r\n}\r\n\r\n#page-loader .preloader-interior:after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 15px;\r\n    left: 15px;\r\n    right: 15px;\r\n    bottom: 15px;\r\n    border-radius: 50%;\r\n    border: 3px solid transparent;\r\n    border-top-color: #f9c922;\r\n\r\n    -webkit-animation: spin 1.5s linear infinite; \/* Chrome, Opera 15+, Safari 5+ *\/\r\n      animation: spin 1.5s linear infinite; \/* Chrome, Firefox 16+, IE 10+, Opera *\/\r\n}\r\n\r\n@-webkit-keyframes spin {\r\n    0%   { \r\n        -webkit-transform: rotate(0deg);  \/* Chrome, Opera 15+, Safari 3.1+ *\/\r\n        -ms-transform: rotate(0deg);  \/* IE 9 *\/\r\n        transform: rotate(0deg);  \/* Firefox 16+, IE 10+, Opera *\/\r\n    }\r\n    100% {\r\n        -webkit-transform: rotate(360deg);  \/* Chrome, Opera 15+, Safari 3.1+ *\/\r\n        -ms-transform: rotate(360deg);  \/* IE 9 *\/\r\n        transform: rotate(360deg);  \/* Firefox 16+, IE 10+, Opera *\/\r\n    }\r\n}\r\n@keyframes spin {\r\n    0%   { \r\n        -webkit-transform: rotate(0deg);  \/* Chrome, Opera 15+, Safari 3.1+ *\/\r\n        -ms-transform: rotate(0deg);  \/* IE 9 *\/\r\n        transform: rotate(0deg);  \/* Firefox 16+, IE 10+, Opera *\/\r\n    }\r\n    100% {\r\n        -webkit-transform: rotate(360deg);  \/* Chrome, Opera 15+, Safari 3.1+ *\/\r\n        -ms-transform: rotate(360deg);  \/* IE 9 *\/\r\n        transform: rotate(360deg);  \/* Firefox 16+, IE 10+, Opera *\/\r\n    }\r\n}<\/pre>\n<p>El <strong>c\u00f3digo completo<\/strong> ser\u00eda \u00e9ste (guardarlo como<strong> index.html<\/strong>):<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"&gt;\r\n&lt;head&gt;\r\n&lt;link href='http:\/\/fonts.googleapis.com\/css?family=Oswald:400,300,700' rel='stylesheet' type='text\/css'&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;title&gt;Preloader Web&lt;\/title&gt;\r\n&lt;link href=\"css.css\" type=\"text\/css\" rel=\"stylesheet\" \/&gt;\r\n&lt;script&gt;\r\n$(window).load(function(){\r\n    $('#page-loader').fadeOut(500);\r\n});\r\n&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div id=\"page-loader\"&gt;&lt;span class=\"preloader-interior\"&gt;&lt;\/span&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Repasando un poco, nos daremos cuenta que lo que hace toda la magia, es el javascript de 3 l\u00edneas. Puedes ver una demo <a title=\"Demo\" href=\"http:\/\/wjharil.github.io\/Preloader\/\" target=\"_blank\">aqu\u00ed<\/a>, y descargarte el c\u00f3digo completo <a title=\"Descargar c\u00f3digo completo\" href=\"https:\/\/github.com\/wjharil\/Preloader\" target=\"_blank\">aqu\u00ed<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Primero, vamos a definir qu\u00e9 es un preloader: una imagen o texto, que se muestra<br \/><a class=\"moretag\" href=\"https:\/\/wjharil.com\/blog\/preloader-usando-css-y-jquery\/\">Continuar Leyendo...<\/a>","protected":false},"author":1,"featured_media":98,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":["css","jquery","preloader"],"featured_image_src":"https:\/\/wjharil.com\/blog\/wp-content\/uploads\/2015\/04\/loader.jpg","categorias":["Facebook","Fuera de tema","Recursos","Tutoriales"],"_links":{"self":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/94"}],"collection":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":7,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/94\/revisions"}],"predecessor-version":[{"id":118,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/94\/revisions\/118"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media\/98"}],"wp:attachment":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media?parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/categories?post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/tags?post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}