Слайдер горизонтальной загрузки

Настройка Компонент темы
23

Круто. Можешь предоставить id/class для переопределения, так как я не хочу менять наш четверичный цвет?

Обновление: Забыл, нашел.

4 лайка
24

Теперь выглядит очень хорошо! Отличная работа! :+1:

5 лайков
25

Возможно, но на данном этапе это всё ещё просто эксперимент.

На случай, если это понадобится кому-то ещё:

div.loading-indicator {
  background-color: red
}
17 лайков
26

@david Не могли бы вы, пожалуйста, воссоздать анимацию в точности, как на GitHub: сначала появляется чуть более тёмная полоса на всю ширину, затем полоса загрузки начинает заполняться, а после исчезает?

5 лайков
27

Конечно, можем попробовать сделать там более сдержанный фон. Также мне интересно, не будет ли «третичный» цвет более подходящим выбором для самой полосы.

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, сколько пикселей в толщину линия в Hub?

11 лайков
41

При использовании таймера темы для перемещения появляется индикатор загрузки вместо ползунка.

8 лайков
42

Сейчас она 2 пикселя. Но, насколько я помню, DiscourseHub намеренно обрезает верхний пиксель области просмотра, чтобы обойти ошибку в iOS. Поэтому в DiscourseHub она отображается как 1 пиксель.

12 лайков
44

Понял, глядя на это сейчас:

DiscourseHub 3px
Загрузка компонента + хаб 1px
Загрузка компонента + Safari 2px

Хотелось бы увидеть все по 3px :slight_smile:

Обратите внимание, что хаб может сам позаботиться о исправлении хаба.

13 лайков
45

Ах, теперь я понимаю, что вы имеете в виду — у приложения есть свой индикатор загрузки. Да, 3px выглядит гораздо лучше :+1:

@pmusaraj, есть ли способ определить в CSS, запущен ли Discourse в хабе? Или, возможно, приложение может внедрить дополнительный CSS?

10 лайков
46

Хм, похоже, мы добавляем класс только для приложения на iPad. В JS можно проверить это с помощью утилиты isAppWebview() (или мы можем добавить класс для body всем веб-вью DiscourseHub — это в любом случае было бы полезно).

10 лайков
47

Лично я считаю, что это большое улучшение по сравнению со спиннером, и мы должны перенести его в ядро как элемент по умолчанию. :clap: Он «ощущается» намного быстрее спиннера, и это удивительно! Что вы думаете, @sam и @eviltrout? У нас есть время, чтобы привыкнуть к нему и принять решение..

19 лайков
48

Да, мне это очень нравится и на десктопе, и на мобильных устройствах. Есть несколько мелких недочётов, которые нужно исправить, но да, я считаю, что это должно быть включено в основную версию.

14 лайков
49

Я wondered, почему появилась полоса прогресса! Мне нравится, отлично @david :clap:

14 лайков
51

Отлично! На экране MacBook Retina для меня это немного слишком незаметно — мне кажется, что высота скорее 1 пиксель, чем 3? Почти не видно.

4 лайка