Curseur de chargement horizontal

Super. Peux-tu fournir l’ID ou la classe pour la surcharge, car je ne souhaite pas modifier notre couleur quaternaire ?

Mise à jour : Oubliez, je l’ai trouvé.

Maintenant, ça a l’air très bien ! Excellent travail !

C’est possible, mais cela reste encore une simple expérience à ce stade.

Juste au cas où quelqu’un d’autre en aurait besoin :

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

@david Pourriez-vous s’il vous plaît reproduire l’animation à 100 % comme sur GitHub, où d’abord une barre légèrement plus sombre apparaît sur toute la largeur, puis la barre de chargement se remplit, et enfin elle s’estompe ?

Bien sûr, nous pouvons essayer un arrière-plan subtil ici. Je me demande aussi si ‘tertiaire’ serait un meilleur choix de couleur pour la barre elle-même.

Serait-il possible d’ajouter une classe au corps de la page lorsque la barre de chargement est active, afin que nous puissions appliquer des effets sur d’autres éléments en conséquence ?

Je pense à l’effet de fondu en sortie de NodeBB : https://community.nodebb.org/

Je suppose que cela pourrait être réalisé avec quelque chose comme ceci si nous avons une classe sur le corps :

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

J’aime beaucoup cela car YouTube fait exactement la même chose. Bien que ce soit expérimental, j’aimerais voir cela intégré au cœur du système. Le cercle en rotation semblait très statique, donc peut-être faudrait-il le repenser, et je serais plutôt partisan de cela plutôt que du curseur.

J’adore pour l’instant. Un détail vraiment soigné.

Merci d’avoir ajouté l’arrière-plan ! Ça a l’air beaucoup mieux et plus dynamique maintenant. Excellent travail, @david.

J’ai lu des messages (comme le 28e message) dans ce sujet, puis j’ai cliqué sur le sujet (pour revenir au début du sujet). Je n’avais pas ce problème.

Mineur, mais je pense que l’épaisseur de la ligne que nous utilisons dans Discourse Hub fonctionne beaucoup mieux.

@pmusaraj, quelle est l’épaisseur de la ligne dans le Hub en pixels ?

L’utilisation du minuteur de sujet pour naviguer affiche le sélecteur circulaire au lieu du curseur.

Elle est actuellement de 2 px. Mais si ma mémoire est bonne, DiscourseHub coupe délibérément le pixel supérieur de la fenêtre d’affichage pour contourner un bug sur iOS. Ainsi, dans DiscourseHub, elle apparaît comme ayant 1 px d’épaisseur.

Je vois, en y regardant de plus près :

DiscourseHub 3px
Composant de chargement + hub 1px
Composant de chargement + Safari 2px

J’aimerais bien les voir tous à 3px

Note : nous pouvons faire en sorte que le hub s’occupe de corriger le hub.

Ah, je vois maintenant ce que tu veux dire – l’application possède son propre indicateur de chargement. Oui, 3px semble beaucoup mieux

@pmusaraj, y a-t-il un moyen de savoir en CSS si Discourse s’exécute dans le hub ? Ou peut-être que l’application peut injecter du CSS supplémentaire ?

Hmm, il semble que nous ajoutions une classe uniquement pour l’application sur iPad. En JS, vous pouvez vérifier en utilisant l’utilitaire isAppWebview() (ou nous pouvons ajouter une classe body pour toutes les webviews de DiscourseHub, ce qui serait utile de toute façon).

Je pense personnellement que c’est une grande amélioration par rapport au spinner et que nous devrions l’intégrer dans le cœur du système par défaut. Il « semble » beaucoup plus rapide que le spinner, de manière surprenante ! Qu’en pensez-vous @sam et @eviltrout ? Nous avons un peu de temps pour l’expérimenter et décider..

Oui, j’aime beaucoup cela, tant sur ordinateur que sur mobile. Quelques petits bugs à corriger, mais oui, je pense que cela devrait être intégré au cœur du système.

Je me demandais pourquoi la barre de progression est apparue ! Je l’adore, bravo @david

J’adore ! Sur l’écran Retina de mon MacBook, c’est un peu trop subtil à mon goût — j’ai l’impression qu’il apparaît plutôt comme haut de 1 px que de 3 ? C’est à peine perceptible.