Deslizador de carga horizontal

Genial. ¿Puedes proporcionar el id/clase para la anulación, ya que no quiero cambiar nuestro color cuaternario?

Actualización: No importa, lo encontré.

¡Ahora se ve muy bien! ¡Gran trabajo!

Posiblemente, pero esto sigue siendo solo un experimento en esta etapa.

Solo por si alguien más lo necesita:

div.loading-indicator {
  background-color: red
}

@david ¿Podrías, por favor, replicar la animación al 100% como en GitHub, donde primero aparece una barra ligeramente más oscura en todo el ancho, luego la barra de carga comienza a llenarse y finalmente se desvanece?

Claro, podemos probar un fondo sutil allí. También me pregunto si ‘terciario’ sería una mejor opción de color para la barra en sí.

¿Sería posible añadir una clase al cuerpo cuando la barra de carga esté activa para que podamos aplicar efectos en otras partes en consecuencia?
Estoy pensando en el efecto de desvanecimiento de NodeBB: https://community.nodebb.org/
Supongo que podría hacerse algo así si tuviéramos una clase en el cuerpo:

body.loading {
    #main-outlet {
        transition: opacity 0.25s;
        opacity: 0;
    }
}

Me gusta mucho porque YouTube hace exactamente lo mismo. Aunque esto es experimental, me gustaría verlo llegar al núcleo. El círculo giratorio parecía muy estático, así que quizás debería recibir una actualización, y yo sería más o menos un partidario de eso en lugar del control deslizante.

Me encanta hasta ahora. Un detalle tan elegante.

¡Gracias por agregar el fondo! Ahora se ve mucho mejor y más dinámico. Gran trabajo, @david

Leí publicaciones (como la 28ª) en este tema, y luego hice clic en el tema (para ir al principio del tema). No tenía esto.

Pequeño detalle, pero creo que el grosor de la línea que usamos en el centro de Discourse funciona mucho mejor.

@pmusaraj, ¿cuántos píxeles de grosor tiene la línea en el centro?

Usar el temporizador del tema para desplazarse muestra el control giratorio en lugar del deslizador.

Actualmente es de 2px. Pero, si no recuerdo mal, DiscourseHub recorta deliberadamente el píxel superior del 1px de la vista para solucionar un error de iOS. Por lo tanto, en DiscourseHub se muestra como 1px.

Vale, viéndolo ahora:

DiscourseHub 3px
Cargando componente + hub 1px
Cargando componente + Safari 2px

Me encantaría verlos todos a 3px

Nota: podemos hacer que el hub se encargue de corregir el hub.

Ah, ahora entiendo a qué te refieres: la aplicación tiene su propio indicador de carga. Sí, 3px se ve mucho mejor

@pmusaraj, ¿hay alguna manera de saber en CSS si Discourse se está ejecutando en el hub? ¿O quizás la aplicación puede inyectar algún CSS adicional?

Hmm, parece que solo agregamos una clase para la aplicación en iPad. En JS, podrías verificarlo usando la utilidad isAppWebview() (o podemos agregar una clase al body para todas las webviews de DiscourseHub, lo cual sería útil de todos modos).

Personalmente, siento que esto es una gran mejora sobre el spinner y deberíamos integrarlo en el núcleo como predeterminado. ¡Se “siente” mucho más rápido que el spinner, sorprendentemente! ¿Qué opinan @sam y @eviltrout? Tenemos tiempo para vivir con ello y decidir…

Sí, me gusta mucho, tanto en escritorio como en móvil. Hay algunos pequeños errores que resolver, pero creo que esto debería incluirse en el núcleo.

Me preguntaba por qué apareció la barra de progreso. ¡Me encanta, buen trabajo @david

¡Me encanta! En la pantalla Retina de mi MacBook, para mi gusto es un poco demasiado sutil: siento que se ve más bien como de 1 píxel de altura en lugar de 3. Apenas se nota.