Slider di caricamento orizzontale

Personalizzazione Componente del tema
23

Bene. Puoi fornire l’id/classe per l’override, poiché non voglio modificare il nostro colore quaternario?

Aggiornamento: Non importa, l’ho trovato.

4 Mi Piace
24

Ora sembra molto buono! Ottimo lavoro! :+1:

5 Mi Piace
25

Forse, ma al momento si tratta ancora solo di un esperimento.

Nel caso in cui qualcun altro ne abbia bisogno:

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

@david Potresti replicare l’animazione al 100% come su GitHub, dove prima appare una barra leggermente più scura su tutta la larghezza, poi la barra di caricamento inizia a riempirsi e infine svanisce?

5 Mi Piace
27

Certo, possiamo provare uno sfondo sottile lì. Mi chiedo anche se ‘tertiary’ sia una scelta di colore migliore per la barra stessa.

16 Mi Piace
28

Sarebbe possibile aggiungere una classe al body quando la barra di caricamento è attiva, in modo da poter applicare effetti su altre parti di conseguenza?
Sto pensando all’effetto di dissolvenza in uscita di NodeBB: https://community.nodebb.org/
Immagino che potrebbe essere realizzato qualcosa del genere se avessimo una classe sul body:

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

Mi piace molto perché YouTube fa esattamente la stessa cosa. Anche se è sperimentale, mi piacerebbe vederlo integrato nel core. Il cerchio che ruota sembrava molto statico, quindi forse dovrebbe essere rivisto e sarei più o meno favorevole a quello invece dello slider.

5 Mi Piace
36

Mi piace molto finora. Un dettaglio così carino.

5 Mi Piace
37

Grazie per aver aggiunto lo sfondo! Ora sembra molto meglio e più dinamico. Ottimo lavoro, @david

5 Mi Piace
38

Ho letto i post (come il 28° post) in questo argomento, e poi ho cliccato sull’argomento (per tornare all’inizio) ma non ho avuto questo problema.

8 Mi Piace
39

Minima, ma credo che lo spessore della linea che usiamo nel Discourse Hub funzioni molto meglio.

@pmusaraj quanti pixel di spessore ha la linea nel Hub?

11 Mi Piace
41

Utilizzando il timer dell’argomento per spostarsi, viene visualizzato il caricamento invece del cursore.

8 Mi Piace
42

Attualmente è di 2px. Ma, se ricordo bene, DiscourseHub taglia deliberatamente i primi 1px della viewport per aggirare un bug di iOS. Quindi in DiscourseHub appare come 1px.

12 Mi Piace
44

Capisco, guardando ora

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

Mi piacerebbe vederli tutti a 3px :slight_smile:

Nota: possiamo far sì che l’hub si occupi di risolvere il problema dell’hub

13 Mi Piace
45

Ah, ora capisco cosa intendi: l’app ha il suo indicatore di caricamento. Sì, 3px sembra molto meglio :+1:

@pmusaraj esiste un modo per capire tramite CSS se Discourse è in esecuzione nell’hub? Oppure l’app potrebbe iniettare del CSS aggiuntivo?

10 Mi Piace
46

Hmm, sembra che aggiungiamo una classe solo per l’app su iPad. In JS, puoi verificare utilizzando l’utilità isAppWebview() (o possiamo aggiungere una classe al body per tutte le webview di DiscourseHub, il che sarebbe utile comunque).

10 Mi Piace
47

Personalmente, penso che questo sia un grande miglioramento rispetto allo spinner e dovremmo integrarlo nel core come predefinito. :clap: “Sembra” molto più veloce dello spinner, sorprendentemente! Cosa ne pensate, @sam e @eviltrout? Abbiamo un po’ di tempo per provarlo e decidere..

19 Mi Piace
48

Sì, mi piace molto, sia su desktop che su mobile. Ci sono alcune piccole imperfezioni da sistemare, ma sì, penso che questa funzionalità dovrebbe essere inclusa nel core.

14 Mi Piace
49

Mi chiedevo perché apparisse la barra di progresso! Mi piace, ottimo lavoro @david :clap:

14 Mi Piace
51

Mi piace! Sul mio schermo Retina del MacBook è un po’ troppo sottile per i miei gusti: mi sembra che appaia alto 1px invece di 3? È appena percettibile.

4 Mi Piace