Barra cargando - loading con CSS, sencilla y elegante para tu blog

Me pareció una manera de ver la carga total del blog de una manera muy sencilla y elegante, además de ser bastante discreta pero vistosa...

Barra cargando - loading con CSS

Me pareció una manera de ver la carga total del blog de una manera muy sencilla y elegante, además de ser bastante discreta pero vistosa al mismo tiempo, la podéis ver funcionando en este mismo blog, su configuración es super sencilla, con tan sólo tres códigos uno para darla estilo, otro sería el script y el último el div que hará la llamada.

Comencemos:

Entra en plantilla y expande artilugios, ahora encima de ]]></b:skin>, pega estos estilos (CSS):

#load_barra {
position: fixed;
display: block;
z-index:999999;
top: 0px;
left: 0px;
background: #FF0000;    /* Color de fondo */
border-top:1px solid #0000FF;   /* Color superior */
border-bottom:1px solid #0000FF;    /* Color inferior */
border-right:1px solid #0000FF;    /* Color derecha */
width: 5%;
height: 4px;   /* Ancho del fondo */
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

Ahora encima de: </head>, pega este script.

<script type='text/javascript'>
//<![CDATA[
(function(jQuery) {
jQuery("#header").ready(function() {
jQuery("#load_barra").stop().animate({
width: "25%"
}, 1500)
});
jQuery("window").load(function() {
jQuery("#load_barra").stop().animate({
width: "75%"
}, 1500)
});
jQuery(window).load(function() {
jQuery("#load_barra").stop().animate({
width: "100%"
}, 1500, function() {
jQuery("#load_barra").fadeOut("fast", function() {
jQuery(this).remove()
})
})
})
})(jQuery);
//]]>
</script>

Y por último debajo de: <body>, pega este div que hará la llamada.

<div id='load_barra'></div>

Si quieres modificarla a tu gusto como por ejemplo darla más anchura y/o cambiarla los colores puedes hacerlo modificando los códigos marcados en azul (tabla de colores).

Una vez implantados los códigos haz vista previa y si todo funciona según lo esperado, puedes guardar plantilla.

Importante: antes de hacer cualquier modificación en tu plantilla haz una copia de la misma, por si surge cualquier problema que podamos restaurarla.

Algunas características:
* No afecta la velocidad de carga de tu blog.
* Compatible con distintos navegadores (Chrome, Firefox, Safari, IE, Opera, etc, etc).
* Da un estilo muy personal a tu blog.
* Múltiples configuraciones.


Fuente, modificación y personalización: Pedro PC (Admin)

Comentarios

BLOGGER: 4
Cargando...
En la retina: La mujer y su "derecho a nada" en la época franquista Gracias a la Química vivimos más



En algunos artículos se irá añadiendo texto y/o vídeos según creamos conveniente, para una mayor ilustración de los mismos.

Si encuentras un error de sintaxis, redacción u ortográfico en el artículo, vídeos que dejaron de funcionar, etc... háznoslo saber a través de " Contacto". ¡Muchas gracias!


Si te gustó este artículo, entérate de más a través de nuestros canales de Facebook, Twitter, Google+ y Telegram.

Pintura$type=left$va=0$count=3

Trenes$type=right$va=0$count=3

/fa-tag/ Cerveza$type=one$count=3

/fa-youtube-square/ Vídeos recomendados


Historia y curiosidades del submarino

Enlace: Historia y curiosidades del submarino

Mito y realidad de la brujería (Brujas)

Enlace: El origen de las brujas, podría ser anterior al ser humano

/fa-youtube-square/ Tu vídeo favorito, o el suyo.


Háblame de ti (1979) - Los Pecos

Dinos tu vídeo favorito a través de " Contacto" y lo pondremos (sólo de YouTube - Vevo).

Dedicaselo: Dinos tu nombre y a la persona que se lo quieras dedicar y lo haremos visible durante una semana.

... Aquí tú dedicatoria...
Nombre

2012,9,3 dimensiones,6,A. Edison,2,A.Turing,2,Abducción,3,Abejas,3,AC-DC,3,Adán y Eva,2,ADN,2,Agua,65,Águilas,4,Air Force One,2,Ajedrez,2,Al Capone,2,Alimentación,40,Alquimia,4,Amor,49,Amuleto/Talismán,2,Anarquismo,2,Ángeles,6,Animales,145,Anonymous,3,Antártida,2,Apocalipsis,3,Apple,10,Arañas,4,Argentina,13,Armagedón,2,Armas,18,Artes marciales,7,Asteroides,13,Atlántida,3,Audio,44,Audio libros,23,Aviones,47,Ballenas,2,Banderas,6,Barbie,3,Barcos,22,Beatles,8,Bebidas,30,Biblia,16,Bicicletas,8,Big Bang,5,Bluetooth,2,Boxeo,3,Britney Spears,2,Brujería,4,Burgos,38,C. Colón,4,Caballos,4,Café,3,Calculadoras,3,Calendario,11,Camiones,3,Cáncer,5,Cárceles,3,Casino,2,Castillos,8,Castrati,2,Cern,4,Cerveza,5,Charlot,3,Chat,3,Che,3,China,25,Ciencia,304,Cine,100,Circo,5,Citröen,3,Cleopatra,2,Clima,21,Clima (Burgos) - Horario mundial,1,Coca cola,2,Códice,4,Código,9,Código abierto,5,Cometas,6,Cómic,7,Concorde,2,Continentes,4,Copla,2,Cuba,3,Cuerpo de élite,3,Cuerpo humano,102,Culturas urbanas,3,Curiosidades,1062,Curiosity Rover,1,Da Vinci,6,Delfines,3,Delorean DMC - 12,2,Deportes,50,Día D,1,Diablo,9,Dibujos,34,Discos,4,Disney,17,Documentales,260,Doodle,2,Dragones,2,Drogas,6,Drones,2,Ébola,2,Eclipses,3,Edad Media,9,EE.UU.,108,Egipto,27,Einstein,3,El Cid,5,El Jarabo,2,El Lute,1,Elvis,3,En directo,5,Energía,48,Enfermedad,40,Enseñanza,175,Esclavitud,2,Escorpiones,2,Espadas,2,España y Pueblos,229,Estrellas,13,Exorcismo,6,Fantasmas,9,Ferrari,5,Física,33,Flamenco,2,Fobias,3,Ford,3,Formula 1,2,Fotografía,26,Francia,11,Franco,11,Francotiradores,3,Frases/Dichos,10,Freddie Mercury,3,Fuego,9,Fútbol,23,Galileo,4,Gandhi,2,Gastronomía,5,Gigantismo,3,Gitanos,5,Gliese 832,2,Google,18,GPS,4,Groucho Marx,2,Guerra,74,Guinness,8,Guitarras,5,H.Davidson,2,Hackers,14,Halloween,3,Hilo rojo,2,Hippie,2,Historia,632,Hitler,14,Homosexualidad,3,Humor,57,Huracanes,3,Idiomas,7,Imprenta,4,Indígenas,4,Indios,5,Informática,112,Insectos,11,Internet,66,Inventos,181,Invidente,5,Italia,14,Jabón,3,Jackson,9,Japón,19,Jesucristo,12,John Lennon,3,Juegos,31,Juegos en línea,24,Juegos olímpicos,5,Juguete,10,Kennedy,2,Lady Di,2,Las fuerzas del planeta (Serie),5,Láser,3,Leyendas,103,Libros,33,Lotería,2,Luis Lucena,2,Luna,19,Mafia,7,Magia,10,Magnetismo,16,Máquina del tiempo,2,Maradona,4,Maratón,2,Marie Curie,2,Marilyn Monroe,3,Masonería,3,Mayas,8,McDonald's,3,Medidor,1,México,27,Mi pedazo de cielo,1,Mike Tyson,2,Misterio,243,Mitologías,2,Moda,12,Mona Lisa,2,Monarca,4,Monedas,8,Monopoly,2,Mosquitos,2,Motor,63,Motor de agua,2,Motos,8,Mozart,2,Muñecas,7,Museo,7,Música,134,Nachito,1,Napoleón,2,Nasa,14,Navarra,4,Navidad,28,Nintendo,4,Nostradamus,3,Noticias,253,Notre Dame,2,Nuclear,16,Obesidad,3,Ouija,2,Ovnis,31,Pamplona,2,Papa,6,Papá Noel,2,Pegamento,2,Pendrive,3,Península Ibérica,2,Perfumes,2,Perros,18,Personas,463,Petróleo,2,Piedras preciosas,2,Pinocho,2,Pintura,14,Pirámides,4,Piratas,6,Pirotecnia,3,Plantas,24,Pokémon Go,2,Polígrafo,2,Poltergeist,2,Profecías,10,Psicofonía,2,Queen,5,Quijote,2,Química,8,Radio,14,Ranas,2,Recordando a,192,Reencarnación,3,Reggae,2,Religión,130,Relojes,17,Resaca,2,Reyes magos,5,Rock,7,Roma,32,Rosetta,2,Rusia,24,Sabías que,1666,Salud,159,San Valentín,2,Seducción,3,Semana Santa,4,SETI,3,Shakira,2,SIDA,6,Simpson,3,Sistema solar,14,Sol,35,Spam,3,Submarino,4,Sucesos,64,Sueños,20,Sugerencias,36,Symbian,33,Tabaco,3,Tatuajes,5,Tecnología,278,Ted Williams,2,Telefonía,59,Telescopios,5,Televisión,18,Templarios,3,Teresa de Calcuta,2,Terremotos,13,Test,4,Tetris,2,Tiburones,11,Tierra,110,Titanic,11,Toros,5,Torre Eiffel,2,Torres gemelas,2,Trenes,11,Triángulo de las Bermudas,4,Trucos,4,Tutankamón,4,Tutorial,13,Universo,118,Vacunas,3,Varios,94,Vídeo,671,Videojuegos,5,Vino,2,Virus,6,Virus informáticos,15,Vril,2,Whisky,2,Windows,6,YouTube,6,Zodiaco,4,Zombis,3,
ltr
item
Te interesa saber: Barra cargando - loading con CSS, sencilla y elegante para tu blog
Barra cargando - loading con CSS, sencilla y elegante para tu blog
http://1.bp.blogspot.com/-7CUGP8YNAWs/VPZjp1HsXEI/AAAAAAAAIUY/LW1KOsxh4mM/s1600/barra-carga.jpg
http://1.bp.blogspot.com/-7CUGP8YNAWs/VPZjp1HsXEI/AAAAAAAAIUY/LW1KOsxh4mM/s72-c/barra-carga.jpg
Te interesa saber
http://www.teinteresasaber.com/2013/04/barra-cargando-loading-con-css-sencilla.html
http://www.teinteresasaber.com/
http://www.teinteresasaber.com/
http://www.teinteresasaber.com/2013/04/barra-cargando-loading-con-css-sencilla.html
true
637010643059257927
UTF-8
Cargar todos los artículos No se ha encontrado Ver más Seguir leyendo... Responder Cancelar respuesta Borrar Por Inicio Páginas Artículos Ver más Recomendados para ti: Etiqueta Archivo Buscar Todos los artículos No se encontró nada con este término Volver a Inicio Domingo Lunes Martes Miércoles Jueves Viernes Sábado Domingo Lunes Martes Miércoles Jueves Viernes Sábado Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre justo ahora hace 1 minuto hace $$1$$ minutos hace 1 hora hace $$1$$ horas Ayer hace $$1$$ días hace $$1$$ semanas hace más de 5 semanas Seguidores Seguir Este contenido es premium Compartir para desbloquear Copie todo el código Seleccione todo el código Todos los códigos se copiaron en el portapapeles Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy