El widget progressbar()
El widget progress bar nos peritirá seguir un proceso de carga, aunque generalmente necesitamos relacionarlo con alguna función Ajax.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
//$("#barra").progressbar({value:41});
var b = $("#barra");
var e = $("#etiqueta");
b.progressbar({
value: false,
change: function() {
e.text( b.progressbar( "value" ) + "%" );
},
complete: function() {
e.text( "Completo!" );
}
});
function progreso() {
var val = b.progressbar( "value" ) || 0;
b.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progreso, 100 );
}
}
setTimeout( progreso, 3000 );
}
</script>
<title>Progress</title>
<style>
#etiqueta {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
</head>
<body>
<div id="barra"><div id="etiqueta">Cargando...</div></div>
</body>
</html>
No hay comentarios:
Publicar un comentario