横型ローディングスライダー

カスタマイズ テーマコンポーネント
23

いいですね。上書きに使用する ID またはクラスを教えてください。当社のクォータナリーカラーを変更したくないためです。

更新：問題ありません、見つかりました。

「いいね！」 4
24

これでとても良くなりました！素晴らしい仕事です！:＋1:

「いいね！」 5
25

可能性はありますが、現時点ではまだ実験段階です。

他の誰かにも必要かもしれないので：

div.loading-indicator {
  background-color: red
}
「いいね！」 17
26

@david 恐れ入りますが、GitHub と完全に同じアニメーションを再現していただけますでしょうか。まず、幅全体にわたって少し濃いバーが表示され、その後、読み込みバーが埋まり、最後にフェードアウトするものです。

「いいね！」 5
27

確かに、そこに控えめな背景を試すことができます。また、バー自体の色については「tertiary」の方が適しているかどうか気になります。

「いいね！」 16
28

ローディングバーがアクティブなときに body クラスを追加することは可能でしょうか？そうすれば、他の部分にそれに応じてエフェクトを追加できます。
NodeBB のフェードアウト効果を想定しています: https://community.nodebb.org/

body クラスがあれば、以下のような方法で実現できると思います。

body.loading {
    #main-outlet {
        transition: opacity 0.25s;
        opacity: 0;
    }
}
「いいね！」 8
35

YouTube も全く同じことをしているので、とても気に入っています。これは実験的な機能ですが、コア機能として実装されることを望みます。回転する円は非常に静的に見えたので、そちらの刷新を検討すべきかもしれません。スライダーではなく、そちらを支持します。

「いいね！」 5
36

今のところ大満足です。そんな細かいところまでこだわっているなんて、さすがですね。

「いいね！」 5
37

背景を追加してくれてありがとう！ずいぶん良くて、よりダイナミックな印象になりました。素晴らしいですね、@david

「いいね！」 5
38

このトピックの投稿（28番目の投稿など）を読んだ後、トピックの先頭へ移動するためにトピックをクリックしましたが、その現象は発生しませんでした。

「いいね！」 8
39

些細なことですが、Discourse Hub で使っている線の太さの方がはるかに優れていると思います。

@pmusaraj ハブの線の太さは何ピクセルですか？

「いいね！」 11
41

トピックタイマーを使用して移動すると、スライダーの代わりにローディングスピナーが表示されます。

「いいね！」 8
42

現在は 2px です。ただし、私の記憶が正しければ、DiscourseHub は iOS のバグを回避するためにビューポートの上部 1px を意図的に切り落としています。そのため、DiscourseHub 上では 1px として表示されます。

「いいね！」 12
44

なるほど、今見てみると

DiscourseHub 3px
コンポーネント読み込み + ハブ 1px
コンポーネント読み込み + Safari 2px

すべて 3px になるといいですね :slight_smile:

なお、ハブ側でハブの修正を担当させることも可能です。

「いいね！」 13
45

ああ、今あなたの言いたいことがわかりました。アプリには独自の読み込みスライダーがありますね。はい、3px の方がずっと良く見えます👍

@pmusaraj さん、CSS から Discourse がハブ内で実行されているかどうかを判別する方法はありますか？あるいは、アプリが追加の CSS を注入することは可能でしょうか？

「いいね！」 10
46

うーん、iPad のアプリに対してのみクラスを追加しているようですね。JavaScript では isAppWebview() ユーティリティを使ってチェックできます（あるいは、DiscourseHub のすべての Webview に対して body クラスを追加することもできます。これはいずれにせよ役立つでしょう）。

「いいね！」 10
47

個人的には、スピナーよりも大幅な改善だと感じています。デフォルトとしてコアに組み込むべきでしょう。:clap: スピナーよりも「速い」と感じられますし、それは驚くほどです！@sam さん、@eviltrout さん、どう思いますか？実際に使ってみて判断する時間もありますしね。

「いいね！」 19
48

はい、デスクトップでもモバイルでもとても気に入っています。いくつかの小さな不具合を修正する必要がありますが、これはコア機能として含めるべきだと考えます。

「いいね！」 14
49

プログレスバーが表示された理由が気になっていました！大好きです、素晴らしいですね @david :clap:

「いいね！」 14
51

素晴らしいです！ただ、私のMacBookのRetinaディスプレイでは、少し控えめすぎる気がします。3pxではなく、1px程度に見えるかもしれません。ほとんど目立ちません。

「いいね！」 4