# Слайдер горизонтальной загрузки
**URL:** https://meta.discourse.org/t/horizontal-loading-slider/177939
**Category:** Theme component
**Tags:** deprecated
**Created:** [01.Февраль.2021 09:57:32 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939 "2021-02-01T09:57:32Z")
**Posts on this page:** 20
**Page:** 4
### Author:  [@P16](https://meta.discourse.org/u/P16)
#### Post date: [05.Февраль.2021 00:16:34 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/75 "2021-02-05T00:16:34Z")
Выглядит отлично, Дэвид! Одно предложение — можно ли сделать так, чтобы полоска продолжала двигаться (возможно, в более медленном темпе), вместо того чтобы останавливаться примерно посередине, даже если она ожидает ответа? Например, она могла бы двигаться медленнее от 40% до 70%, а затем останавливаться, если ответа нет?
Скрытие этой короткой паузы, на мой взгляд, сделало бы процесс более отзывчивым и мгновенным 🙂
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [05.Февраль.2021 00:21:55 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/76 "2021-02-05T00:21:55Z")
> [@P16](#):
>
> Вместо того чтобы останавливаться примерно посередине, хотя оно всё ещё ожидает ответа? Может быть, оно могло бы двигаться медленнее от 40% до 70%, а затем останавливаться, если ответа нет?
В настоящее время, похоже, оно движется медленнее в течение 5 секунд перед остановкой на 80% ширины.
Здесь я смоделировал очень, очень медленное интернет-соединение:
Текущий SCSS:
```scss
.loading-indicator-container {
--loading-duration: 5s;
--loading-function: cubic-bezier(0, 0, 0, 1);
--done-duration: 0.4s;
--done-function: ease;
--fade-out-duration: 0.4s;
position: fixed;
top: 0;
left: 0;
z-index: 1001;
height: 3px;
width: 100%;
opacity: 0;
transition: opacity var(--fade-out-duration) ease var(--done-duration);
background-color: var(--primary-low);
}
.loading-indicator-container .loading-indicator {
height: 100%;
width: 100%;
width: 0%;
background-color: var(--tertiary);
}
.loading-indicator-container.loading {
opacity: 1;
transition: opacity 0s;
}
.loading-indicator-container.loading .loading-indicator {
transition: width var(--loading-duration) var(--loading-function);
width: 80%;
}
.loading-indicator-container.done .loading-indicator {
transition: width var(--done-duration) var(--done-function);
width: 100%;
}
body.discourse-hub-webview .loading-indicator-container {
top: 1px;
}
body.footer-nav-ipad .loading-indicator-container {
top: 49px;
}
body.loading #main-outlet {
opacity: 0.2;
transition: opacity 0.2s ease;
}
```
---
### Author:  [@P16](https://meta.discourse.org/u/P16)
#### Post date: [05.Февраль.2021 00:27:45 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/77 "2021-02-05T00:27:45Z")
Хм, у меня оно застревает примерно на 40%, но, я думаю, движущаяся полоса — даже если медленнее — была бы лучше, чем пауза.
Кроме того, касательно затухания: возможно, плавное исчезновение старого контента и появление нового сделало бы процесс более быстрым (если можно обратиться к outlet для маршрута загрузки)?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [05.Февраль.2021 01:49:10 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/78 "2021-02-05T01:49:10Z")
Происходит две вещи…
@Canapin прав: начальная анимация завершается через 5 секунд на отметке 80%… поэтому при медленном соединении она застревает на этом месте и не завершится, пока вы не перейдёте на следующую страницу.
Случай @P16 — это то, что я наблюдаю на быстром соединении… как только происходит переход со текущей страницы, анимация на мгновение останавливается в том месте, где она находилась… и через секунду возобновляется на новой странице (здесь я преувеличил высоту полосы, чтобы её было лучше видно).
Я согласен, что идеальным вариантом было бы сохранить непрерывное движение, но это может быть невозможно без полной переделки реализации…
> [@P16](#):
>
> может быть, стоит затемнять старый контент и плавно показывать новый
Я не думаю, что плавное появление сильно поможет… вы не сможете показать контент, пока он не загрузится, так что таким образом вы лишь немного задержите его появление. Возможно, это создаст иллюзию скорости, но технически это будет медленнее ровно на столько, сколько длится анимация появления!
Только что понял, что можно (отчасти) протестировать эффект плавного появления с помощью компонента оглавления (поскольку он плавно показывает пост). Например, посетите: [PostgreSQL 13 update](https://meta.discourse.org/t/postgresql-13-update/172563). Мне не кажется, что это ощущается как более быстрый вариант… но это определённо выглядит «мягче».
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [05.Февраль.2021 07:23:29 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/81 "2021-02-05T07:23:29Z")
> [@awesomerobot](#):
>
> Я согласен, что идеалом было бы сохранить движение, но это может быть невозможно без полной переделки реализации…
Ооо, я думаю, это происходит потому, что контент _был_ загружен, и произошёл значительный сбой на этапах парсинга HTML, каскадирования стилей, раскладки и рендеринга, в течение которого анимация не могла двигаться.
---
### Author:  [@Matze](https://meta.discourse.org/u/Matze)
#### Post date: [05.Февраль.2021 07:50:29 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/82 "2021-02-05T07:50:29Z")
```
.loading-indicator-container .loading-indicator, .loading-indicator-container {
background-color:#FFCC00;
}
```
Я попытался изменить цвет в CSS темы, но он остаётся синим. Кто-нибудь может помочь?
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [05.Февраль.2021 09:22:12 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/83 "2021-02-05T09:22:12Z")
> [@riking](#):
>
> Ооо, я думаю, это происходит потому, что контент _загрузился_, но возникла значительная задержка в процессе парсинга HTML, каскадирования стилей, раскладки и рендеринга, во время которой анимация не может двигаться.
Да, точно. Однопоточная природа рендеринга JS/DOM означает, что мы теряем множество кадров при отрисовке темы 😢. Слайдер «движется» всё это время, просто кадры никогда не отрисовываются.
> [@Canapin](#):
>
> Если кликнуть из вида профиля на логотип Discourse, верхняя часть исчезает, что выглядит странно.
Спасибо. Я только что исправил это [в ядре](https://github.com/discourse/discourse/commit/d1b289daaacb716d32ba4f13322434644293b5b7), так что здесь, на Meta, это исправится очень скоро.
> [@awesomerobot](#):
>
> Я только что понял, что можно протестировать плавное появление (в некотором роде) с помощью компонента оглавления (поскольку он плавно показывает пост), например… посетите: [Обновление PostgreSQL 13](https://meta.discourse.org/t/postgresql-13-update/172563). Мне кажется, это не кажется особенно быстрее… но определённо «мягче».
Я сегодня включу плавное появление на Meta, чтобы мы могли оценить, как это ощущается. Хотя, очевидно, если мы это сделаем, нам нужно будет убрать другие плавные появления, например, компонент оглавления.
Редактирование: сделано. Плавное появление включено на Meta.
> [@Matze](#):
>
> Я попытался изменить цвет в CSS темы, но он остаётся синим. Любая помощь?
В зависимости от порядка загрузки ваших тем/компонентов это может не сработать. Вам нужно сделать селектор «более специфичным», чем CSS компонента индикатора загрузки. Простейший вариант — добавить `!important` к `background-color`. Также вам нужно убрать селектор контейнера, иначе фон будет таким же, как передний план:
```plaintext
.loading-indicator-container .loading-indicator {
background-color:#FFCC00 !important;
}
```
---
### Author:  [@P16](https://meta.discourse.org/u/P16)
#### Post date: [05.Февраль.2021 10:31:40 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/84 "2021-02-05T10:31:40Z")
> [@david](#):
>
> Сегодня я настрою плавное появление на Meta, чтобы мы могли оценить, как это работает. Хотя, конечно, если мы это сделаем, нам нужно будет убрать другие эффекты плавного появления, например, компонент оглавления.
>
> Редактирование: готово. Плавное появление включено на Meta.
Спасибо, Дэвид, выглядит отлично!
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [05.Февраль.2021 11:39:02 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/85 "2021-02-05T11:39:02Z")
> [@Falco](#):
>
> Следующий уровень: отслеживание средней длительности запросов
Теперь берётся среднее значение за последние 5 загрузок страницы, и на его основе устанавливается скорость полосы.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [05.Февраль.2021 12:54:36 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/86 "2021-02-05T12:54:36Z")
Привет, Дэвид,
Этот загрузчик становится всё лучше и лучше 🙂 Продолжай в том же духе.
> [@david](#):
>
> Теперь он вычисляет среднее значение за последние 5 загрузок страницы и использует его для установки скорости полосы.
С этим новым обновлением всё выглядит более динамично 🙂
* * *
Я только что заметил одну вещь в разделе категорий. Я использую кнопку «Создать тему» для переименования. ⬇
При использовании Loading Slider текст кнопки не обновляется. Я заметил это, так как это может вызвать проблемы с другими скриптами.
> [@Create a new topic button with category and topic template](https://meta.discourse.org/t/how-to-create-a-new-topic-button-with-category-and-topic-template/85775/13?u=dodesz):
>
> Yes, that would also be possible as well. You can use something like this in the header section of a theme component \