Slider de carregamento horizontal

Personalização Componente de tema
23

Legal. Você pode fornecer o id/classe para a substituição, pois não quero alterar nossa cor quaternária?

Atualização: Esqueça, encontrei.

4 curtidas
24

Agora está muito bom! Ótimo trabalho! :+1:

5 curtidas
25

Possivelmente, mas isso ainda é apenas um experimento nesta fase.

Só para caso alguém mais precise:

div.loading-indicator {
  background-color: red
}
17 curtidas
26

@david Você poderia, por gentileza, replicar a animação 100% como no GitHub, onde primeiro uma barra ligeiramente mais escura aparece sobre a largura total, depois a barra de carregamento começa a preencher e, em seguida, desaparece?

5 curtidas
27

Claro, podemos tentar um fundo sutil ali. Também estou me perguntando se ‘terciário’ seria uma escolha de cor melhor para a própria barra.

16 curtidas
28

Seria possível adicionar uma classe ao body quando a barra de carregamento estiver ativa, para que possamos aplicar efeitos em outras partes conforme necessário?

Estou pensando no efeito de fade-out do NodeBB: https://community.nodebb.org/

Acho que isso poderia ser feito com algo assim, se tivermos uma classe no body:

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

Eu realmente gosto disso porque o YouTube faz exatamente a mesma coisa. Embora isso seja experimental, gostaria de vê-lo chegar ao núcleo. O círculo giratório parecia muito estático, então talvez ele precise de uma reformulação, e eu seria mais ou menos fã disso em vez do controle deslizante.

5 curtidas
36

Adoro até agora. Um detalhe tão legal.

5 curtidas
37

Obrigado por adicionar o plano de fundo! Fica muito melhor e mais dinâmico agora. Ótimo trabalho, @david!

5 curtidas
38

Eu li as postagens (como a 28ª) neste tópico e, em seguida, cliquei no tópico (para ir ao início dele). Eu não tinha isso.

8 curtidas
39

Menor, mas acho que a espessura da linha que usamos no Discourse Hub funciona muito melhor

@pmusaraj quantos pixels de espessura tem a linha no Hub?

11 curtidas
41

Usar o temporizador do tópico para navegar exibe o seletor giratório em vez do controle deslizante.

8 curtidas
42

Atualmente, ela tem 2px. Mas, se não me engano, o DiscourseHub corta propositalmente os 1px superiores da viewport para contornar um bug do iOS. Por isso, no DiscourseHub, ela aparece com 1px.

12 curtidas
44

Entendi, olhando agora:

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

Gostaria muito de ver todos em 3px :slight_smile:

Observação: podemos fazer com que o hub cuide de corrigir o próprio hub.

13 curtidas
45

Ah, agora entendi o que você quer dizer — o aplicativo tem seu próprio indicador de carregamento. Sim, 3px parece muito melhor :+1:

@pmusaraj, existe alguma maneira de eu detectar via CSS se o Discourse está rodando no hub? Ou talvez o aplicativo possa injetar algum CSS extra?

10 curtidas
46

Hmm, parece que adicionamos uma classe apenas para o app no iPad. Em JS, você pode verificar usando o utilitário isAppWebview() (ou podemos adicionar uma classe ao corpo para todas as webviews do DiscourseHub, o que seria útil de qualquer forma).

10 curtidas
47

Pessoalmente, acho que isso é uma grande melhoria em relação ao spinner e deveríamos incluí-lo no núcleo como padrão. :clap: Ele “parece” muito mais rápido que o spinner, surpreendentemente! O que vocês acham, @sam e @eviltrout? Temos um tempo para conviver com isso e decidir..

19 curtidas
48

Sim, estou gostando muito disso, tanto no desktop quanto no mobile. Temos alguns pequenos problemas para resolver, mas sim, acho que isso deveria ser incluído no núcleo.

14 curtidas
49

Estava me perguntando por que a barra de progresso apareceu! Adorei, ótimo trabalho @david :clap:

14 curtidas
51

Adorei! No meu MacBook com tela Retina, fica um pouco sutil demais para o meu gosto — sinto que parece ter mais ou menos 1px de altura em vez de 3? É quase imperceptível.

4 curtidas