Bloquear el precargador giratorio de la interfaz de usuario

Me preguntaba si alguien podría darnos una idea de cómo podría agregar un precargador giratorio (como el que usa Apple) usando el complemento jQuery Block UI. El precargador tendría que girar hasta que se cargue el contenido AJAX. ¿Es esto posible con Block UI?

Cualquier dirección sería útil, ¡gracias!

preguntado el 16 de mayo de 11 a las 18:05

4 Respuestas

Encuentre una buena imagen de vibración animada en la web, como esta: palpitante

Configure un div throbber oculto para mostrarlo.

<div id="throbber" style="display:none;">
    <img src="/img/busy.gif" />
</div>

Dile a blockUI que use ese div como mensaje.

$.blockUI({ message: $('#throbber') });

Después de que se complete la llamada ajax, mata al throbber:

$.ajax({
    complete: function(data) {
        // kill the block on either success or error
        $.unblockUI();
    }
});

También puede usar devoluciones de llamada de éxito / error de ajax para controlar blockUI de manera diferente en cada resultado, en lugar de completarlo.

Respondido el 22 de junio de 11 a las 22:06

Si, esto es posible. Puede agregar un precargador en su sitio web en el estilo que desee utilizando este sitio web ...

http://www.preloaders.net/

ACTUALIZACIÓN:

Vea esto para más detalles ...

https://stackoverflow.com/questions/6014386/can-anyone-recommend-an-asp-net-busybox-control/6014442#6014442

contestado el 23 de mayo de 17 a las 14:05

gracias por el enlace, estaba pensando en uno más como uno escrito personalizado usando jQuery Block UI - Chad

He tomado la respuesta proporcionada por mujimu y solucionó un pequeño problema con él. Tengo múltiples usos del "palpitante" que ocurren simultáneamente. Lo que encontré fue que se estropearía y el palpitante dejaría de funcionar si lo encendía antes de que se desbloqueara uno existente.

Esta es mi solución ...

function ReloadDetails(id) {
    $('#' + id + '_Details').block({ message: $('<img src="/images/ajax-loader.gif"/>') });
    $.get(...);
}

Este ajaxLoaderPath es proporcionado por mi cshtml para solucionar problemas con directorios virtuales.

contestado el 23 de mayo de 17 a las 15:05

Odio presentar otra biblioteca para una sola función, así que la he implementado yo mismo, solo con jQuery, JavaScript y Bootstrap 3.

Cuando presiono un botón, mi código agrega un modal de bloqueo a una tabla, hace una llamada ajax y espera 0.5 segundos, luego se desbloquea, para mostrar el gif giratorio (porque puede ser demasiado rápido para notarlo). Gracias por @NaveedButt, encontré https://icons8.com/preloaders/ para generar un gif con el color del tema de mi sitio.

Throbber modal: (gif centrado horizontal y verticalmente)

<div id="throbber" class="modal" role="dialog" style="display:none; position:relative; opacity:0.6; background-color:white;">
    <img style="margin: 0 auto;
                position: absolute;
                top: 0; bottom: 0; left:0; right:0;
                margin: auto;
                display: block;
               " src="/static/images/spinning.gif" />
</div>

El botón:

<div class="row">
    <div class="col-lg-12">
        <div class="pull-right">
            <button type="button" id="reload" class="btn btn-primary pull-right-button" style="width: 120px;">Reload</button>
        </div>
    </div>
</div>

JavaScript + jQuery:

function block() {
    var body = $('#panel-body');
    var w = body.css("width");
    var h = body.css("height");
    var trb = $('#throbber');
    var position = body.offset(); // top and left coord, related to document

    trb.css({
        width: w,
        height: h,
        opacity: 0.7,
        position: 'absolute',
        top:        position.top,
        left:       position.left
    });
    trb.show();
}
function unblock() {
    var trb = $('#throbber');
    trb.hide();
}
$(document).ready(function(){
    $('#reload').click(function(){
        block();
        $.ajax({
            type:       "GET",
            url:        "{% url 'scriptsList'%}",
            async:      false
        });
        setTimeout(function(){
            unblock();
        }, 500); //wait 0.5 second to see the spinning gif

    });
});

El resultado final es:

enter image description here

respondido 26 mar '18, 20:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.