Cargador en CSS

Posteado el 20. Oct, 2010 por tuto in Desarrollo Web, HTML y CSS

PASO 1
Abrimos Dreamweaver y creamos un nuevo documento HTML en blanco.

Cargador en CSS

PASO 2
Ahora creamos una carpeta llamada cargador en css y dentro de esta creamos una carpeta llamada imágenes dentro de la cual vamos a colocar cualquier imagen.

Cargador en CSS

PASO 3
Copiamos el siguiente código justo debajo de las etiquetas

Code block

<meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/cargador.css">
  <link media="only screen and (max-device-width: 480px)" href="css/ios.css" type="text/css" rel="stylesheet" />
  <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/progress.js" type="text/javascript" charset="utf-8"></script>

Cargador en CSS

PASO 4
Con el commando Ctrl + S vamos a guardar nuestro documento dentro de la carpeta cargador en css con el nombre cargador.html.

Cargador en CSS

PASO 5
Ahora vamos al menú File – New y seleccionamos un archivo CSS.

Cargador en CSS

PASO 6
Dentro de nuestro documento copiamos el siguiente código CSS.

Code block

@charset "utf-8";
/* CSS Document */
 
body {
	padding: 30px;
	font-size: 62.5%;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	position: relative;
	margin: 0;
	background-color: #FFF;
}
 
#container {
  margin: 0 auto;
  width: 460px;
  padding: 2em;
 
  background: #DCDDDF;
 
  -webkit-box-shadow: rgba(0, 0, 0, 0.0976562) 1px 0px 1px,
                      rgba(0, 0, 0, 0.046875) 1px -1px 0px,
                      rgba(0, 0, 0, 0.0976562) 0px 1px 0px,
                      rgba(0, 0, 0, 0.0976562) -1px 0px 1px,
                      rgba(0, 0, 0, 0.046875) -1px -1px 0px,
                      rgba(0, 0, 0, 0.148438) 0px 3px 3px;
  -moz-box-shadow: rgba(0, 0, 0, 0.0976562) 1px 0px 1px,
                   rgba(0, 0, 0, 0.046875) 1px -1px 0px,
                   rgba(0, 0, 0, 0.0976562) 0px 1px 0px,
                   rgba(0, 0, 0, 0.0976562) -1px 0px 1px,
                   rgba(0, 0, 0, 0.046875) -1px -1px 0px,
                   rgba(0, 0, 0, 0.148438) 0px 3px 3px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.65, rgba(255,255,255,0.558)), color-stop(1, rgba(255,255,255,1)));
  background: -moz-linear-gradient(rgba(255,255,255,0.558) 65%, rgba(255,255,255,1) 100%);
}
 
.content {
  margin-top: 1em;
  margin-bottom: 1em;
}
 
::selection {
  background: #9bdd62;
  color: rgba(255, 255, 255, 0.847656);
}
 
::-moz-selection {
  color: #fff;
  color: rgba(255, 255, 255, 0.847656);
  background: #ffd16c;
}
 
.content p{
  color: #555;
  font-size: 1.4em;
  line-height: 1.3em;
}
 
.content p.small {
  font-size: 1.1em;
}
 
.content h1 {
  font-size: 2.5em;
  color: rgba(0,0,0,0.6);
  text-shadow: rgba(255,255,255, 0.9) 0 1px 0px;
  font-weight: bold;
 
}
 
.content a, .content a:visited {
  color: #e06f22;
  text-decoration: none;
}
 
.content a:hover {
  color: #ffaa00;
}
 
.ui-progress-bar {
  margin-top: 3em;
  margin-bottom: 3em;
}
 
@-webkit-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }
 
  to {
   background-position: 44px 0;
  }
}
 
.ui-progress-bar {
  position: relative;
  height: 35px;
 
  padding-right: 2px;
 
  background-color: #abb2bc;
 
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
 
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
  background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
 
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}
 
.ui-progress {
 
  position: relative;
  display: block;
  overflow: hidden;
 
  height: 33px;
 
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
 
  -webkit-background-size: 44px 44px; 
 
  background-color: #74d04c;
 
  background: -webkit-gradient(linear, 0 0, 44 44,
    color-stop(0.00, rgba(255,255,255,0.17)),
    color-stop(0.25, rgba(255,255,255,0.17)),
    color-stop(0.26, rgba(255,255,255,0)),
    color-stop(0.50, rgba(255,255,255,0)),
    color-stop(0.51, rgba(255,255,255,0.17)),
    color-stop(0.75, rgba(255,255,255,0.17)),
    color-stop(0.76, rgba(255,255,255,0)),
    color-stop(1.00, rgba(255,255,255,0))
  ), -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #ffaa00));
 
  background: -moz-repeating-linear-gradient(top left -30deg,
    rgba(255,255,255,0.17),
    rgba(255,255,255,0.17) 15px,
    rgba(255,255,255,0) 15px,
    rgba(255,255,255,0) 30px
  ), -moz-linear-gradient(#ffaa00 0%, #e06f22 100%);
 
  -webkit-box-shadow: inset 0px 1px 0px 0px #ffaa00, inset 0px -1px 1px #e06f22;
  -moz-box-shadow: inset 0px 1px 0px 0px #ffaa00, inset 0px -1px 1px #e06f22;
  box-shadow: inset 0px 1px 0px 0px #ffaa00, inset 0px -1px 1px #e06f22;
 
  border: 1px solid #ffaa00;
 
  -webkit-animation: animate-stripes 2s linear infinite;
 
}
 
.ui-progress span.ui-label {
  font-size: 1.2em;
  position: absolute;
  right: 0;
  line-height: 33px;
  padding-right: 12px;
  color: rgba(0,0,0,0.6);
  text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;
  white-space: nowrap;
}

Cargador en CSS

PASO 7
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta css con el nombre cargador.css

Cargador en CSS

PASO 8
Regresamos a nuestro documento HTML y copiamos el siguiente código dentro de las etiquetas

Code block

<div id="container">
 
    <div class="content">
      <h1><a href="http://www.tutorialesenlaweb.com" title="Cargador en CSS">Cargador en CSS</a></h1>
    </div>
 
    <div id="progress_bar" class="ui-progress-bar ui-container">
 
      <div class="ui-progress" style="width: 79%;">
        <span class="ui-label" style="display:none;">Cargando <b class="value">79%</b></span>
      </div>
    </div>
 
    <div class="content" id="main_content" style="display: none;">
      <p>
        <img src="imagenes/imagen.jpg" width="452" height="435" alt="Tutoriales en la web" />
        Cargador en CSS <a href="http://www.tutorialesenlaweb.com">Tutoriales en la web</a>
      </p>
 
    </div>
 
  </div>

Cargador en CSS

PASO 9
Dentro de la carpeta cargador en css creamos una nueva carpeta llamada js y copiamos los dos js que adjunto.

Cargador en CSS

PASO 10
Listo ya tenemos nuestro tutorial terminado.

Cargador en CSS

Descarga el editable Cargador en CSS

Articulos relacionados:

Tags: CSS, Dreamweaver, halloween

Una respuesta para “Cargador en CSS”

Javier

25. Feb, 2011

Los felicito de todo corazón. Desde mi humilde punto de vista, lo que hacen ustedes supera todo lo que he visto por ahí. Soberbios todos los trabajos. Los admiro y créanme que quisiera llegar a saber la cuarta parte de todo lo que saben.

Tutoriales en la Web

Cargador en CSS

Articulos relacionados:

Una respuesta para “Cargador en CSS”

Deja tu Comentario

Categorias

Acerca de