# Horizontaler Ladeschieberegler

**URL:** https://meta.discourse.org/t/horizontal-loading-slider/177939
**Category:** Theme component
**Tags:** deprecated
**Created:** [1. Februar 2021 um 09:57 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939 "2021-02-01T09:57:32Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![Apecengo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/apecengo/32/3945_2.png) [@Apecengo](https://meta.discourse.org/u/Apecengo)
#### Post date: [4. Februar 2021 um 07:58 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/52 "2021-02-04T07:58:43Z")

</div>

Sieht gut aus!

Beim Klicken auf Links in diesem Menü (außerhalb der Dropdowns) wird weiterhin der Ladeindikator angezeigt:

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/8/68ddee65bb53d0cecd2b220caa429ba348d8c9d0.png)

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [4. Februar 2021 um 10:47 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/53 "2021-02-04T10:47:26Z")

</div>

> [@bartv](#):
>
> Ich habe den Eindruck, dass es eher 1 px hoch als 3 px ist?

Derzeit ist es auf 2 px eingestellt, aber wenn du ein Retina-Display mit Skalierung verwendest (z. B. ein MacBook mit Retina), kann es auf deinem Bildschirm näher an 1 px liegen. Ich werde es heute auf 3 px erhöhen.

> [@Apecengo](#):
>
> Beim Klicken auf Links in diesem Menü (außerhalb der Dropdowns) wird weiterhin der Ladekreis angezeigt:

Du hast recht, das ist momentan eine etwas inkonsistente Benutzererfahrung. Technisch gesehen ist das eine knifflige Angelegenheit. Der Ladebalken ist derzeit mit dem Ember-Router verknüpft, sodass er nur bei Ember-Routenwechseln angezeigt wird. Einige „Ladezustände

---

<div class="post-metadata">

### Author: ![anon82467725](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@anon82467725](https://meta.discourse.org/u/anon82467725)
#### Post date: [4. Februar 2021 um 12:25 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/54 "2021-02-04T12:25:48Z")

</div>

Ich erwarte die Unterstützung für hohe DPI-Werte mit großer Spannung. Vielleicht könntet ihr den Seitenadministratoren die Wahl zwischen dem Lade-Slider und einem überarbeiteten rotierenden Kreis geben (_hüstel hüstel 😉_)?

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [4. Februar 2021 um 12:27 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/55 "2021-02-04T12:27:55Z")

</div>

Es wurde nun auf 3 px erhöht, sodass es etwas auffälliger sein sollte.

> [@anon82467725](#):
>
> Vielleicht könnte man den Seitenadministratoren die Wahl zwischen dem Lade-Slider und einem überarbeiteten drehenden Kreis geben.

Administratoren können über eine Themenkomponente alles anpassen. Wenn Seiten also einen Lade-Spinner beibehalten möchten, ist das möglich 🙂

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [4. Februar 2021 um 12:43 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/56 "2021-02-04T12:43:29Z")

</div>

@meghna hat [Custom Loading Spinner Component](https://meta.discourse.org/t/custom-loading-spinner-component/174801?u=merefield) veröffentlicht, eine schöne Möglichkeit, FontAwesome-SVG-Icons zu nutzen, die auf allen DPI-Ebenen funktionieren.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [4. Februar 2021 um 14:14 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/57 "2021-02-04T14:14:19Z")

</div>

Ich liebe das absolut und stimme @codinghorror zu, dass es als Standard in den Kern verschoben werden sollte.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [4. Februar 2021 um 17:01 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/58 "2021-02-04T17:01:18Z")

</div>

> [@Apecengo](#):
>
> Das Anklicken von Links in diesem Menü (außerhalb der Dropdowns) zeigt weiterhin den Lade-Spinner:
> 
> ![image](https://global.discourse-cdn.com/meta/original/3X/6/8/68ddee65bb53d0cecd2b220caa429ba348d8c9d0.png)

Ich denke, ich habe das Problem behoben – der Lade-Spinner sollte nun in allen Ansichten der Themenliste verschwunden sein.

---

<div class="post-metadata">

### Author: ![CaptainZac](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/captainzac/32/195184_2.png) [@CaptainZac](https://meta.discourse.org/u/CaptainZac)
#### Post date: [4. Februar 2021 um 18:52 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/60 "2021-02-04T18:52:08Z")

</div>

Auf dem iPad wird der Ladebalken überhaupt nicht angezeigt. (iPad 5. Generation… glaube ich. iOS 14, DiscourseHub-App)

![image](https://global.discourse-cdn.com/meta/original/3X/c/e/ce9e5e964a2a2c01f95e41ad0103184a16374789.gif)

Siehe GIF ^

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [4. Februar 2021 um 20:09 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/62 "2021-02-04T20:09:51Z")

</div>

> [@CaptainZac](#):
>
> Auf dem iPad wird der Ladebalken überhaupt nicht angezeigt.

Guter Fang, danke @CaptainZac. Ich habe einige Anpassungen vorgenommen, sodass es nun in der PWA/DiscourseHub-Ansicht auf dem iPad funktionieren sollte.

Ich habe auch den 1px-Wert für `top` hinzugefügt, den wir für DiscourseHub auf dem iPhone benötigen. Die volle Höhe von 3px ist jetzt in der App sichtbar und scheint sich recht gut mit dem eigenen Ladebalken von DiscourseHub zu decken.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [4. Februar 2021 um 20:14 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/63 "2021-02-04T20:14:05Z")

</div>

Ich mag das sehr 👍 Wirklich gute Arbeit! 🙂

> [@david](#):
>
> Ich denke, das habe ich jetzt behoben – der Lade-Spinner sollte aus allen Topic-Listenansichten verschwunden sein.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [4. Februar 2021 um 20:35 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/64 "2021-02-04T20:35:24Z")

</div>

Es scheint, dass der Lade-Slider anstelle des Spinner-Laders auf der Startseite nicht aktiviert wird, wenn auf das Logo geklickt wird.

---

<div class="post-metadata">

### Author: ![Idan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/idan/32/198212_2.png) [@Idan](https://meta.discourse.org/u/Idan)
#### Post date: [4. Februar 2021 um 21:07 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/65 "2021-02-04T21:07:46Z")

</div>

Perfekt, fang an, es zu nutzen – danke!

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [4. Februar 2021 um 21:23 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/66 "2021-02-04T21:23:34Z")

</div>

> [@Don](#):
>
> Es scheint, dass der Lade-Slider anstelle des Lade-Spinners auf der Startseite nicht aktiviert wird, wenn man auf das Logo klickt.

Sollte jetzt behoben sein, danke!

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [4. Februar 2021 um 21:48 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/67 "2021-02-04T21:48:37Z")

</div>

Das Problem bei Slidern ist, dass sie sich tatsächlich langsamer anfühlen können (auch wenn die Seite schneller lädt).

Der Grund dafür ist, dass nichts an den meisten Teilen der Seite passiert, bis die Seite vollständig geladen ist – im Gegensatz zur Version mit dem Ladespinner, bei der die Seite _sofort_ nach dem Klick leer wird. Das heißt: Etwas Bedeutendes passiert sofort versus etwas Bedeutendes, das erst nach einer Verzögerung passiert.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [4. Februar 2021 um 21:58 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/68 "2021-02-04T21:58:47Z")

</div>

Ja, das stimmt, und wir haben das intern ebenfalls diskutiert. Wenn wir den gesamten alten Inhalt auf dem Bildschirm behalten, gibt es nach dem Klicken auf einen Link keine unmittelbare Rückmeldung. Ich habe gerade eine Änderung eingeführt, die den Seiteninhalt während des Ladens (teilweise) ausblendet. (cc @awesomerobot)

Ursprünglich hatte ich es so eingestellt, dass es komplett ausblendet, aber dann blieb nur eine leere Seite übrig. Ich denke, eine Deckkraft von 20 % könnte ein guter Kompromiss sein. Genug Rückmeldung, aber nicht zu abrupt? 🤔

Momentan blendet es das gesamte `#main-outlet` aus. Leider glaube ich nicht, dass es eine Möglichkeit gibt, das `{{outlet}}` für die tatsächlich ladende Route gezielt anzusprechen… aber ich würde mich gerne eines Besseren belehren lassen. Ich denke, die einzige Lösung wäre, alle `{{outlet}}`-Elemente in unserem Code durch eine benutzerdefinierte Wrapper-Komponente zu ersetzen…

---

<div class="post-metadata">

### Author: ![Paracelsus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paracelsus/32/164912_2.png) [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [4. Februar 2021 um 22:00 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/69 "2021-02-04T22:00:24Z")

</div>

Immer besser und besser… 🕶

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [4. Februar 2021 um 22:07 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/70 "2021-02-04T22:07:43Z")

</div>

Spiel auf das nächste Level heben: Erfasse, wie lange Anfragen im Durchschnitt dauern, und lass die Ausblendungs-Animation genauso lange dauern 🤣

---

<div class="post-metadata">

### Author: ![Rahim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rahim/32/175936_2.png) [@Rahim](https://meta.discourse.org/u/Rahim)
#### Post date: [4. Februar 2021 um 22:46 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/71 "2021-02-04T22:46:57Z")

</div>

Super. Sieht viel besser aus. 💯👍

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [4. Februar 2021 um 23:23 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/72 "2021-02-04T23:23:42Z")

</div>

Es ist besser, David … aber es fühlt sich immer noch langsamer an. Ich bin mir nicht sicher, ob sich das ändern wird, es sei denn, der Effekt ist so deutlich wie beim Spinner, ehrlich gesagt. Es könnte auch einfach eine Eigenschaft des Sliders sein, besonders wenn er immer abgeschlossen wird. Das liegt daran, dass die Seite fertig geladen ist (oder zumindest so wirkt), bevor der Slider fertig ist … doch der Slider ist es, der als Indikator für das Laden der Seite dient und nicht die Seite selbst, weil er so auffällig ist.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [4. Februar 2021 um 23:37 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/74 "2021-02-04T23:37:31Z")

</div>

[https://meta.discourse.org/u/golaxo/summary](https://meta.discourse.org/u/golaxo/summary)  
Wenn wir von der Profilansicht auf das Discourse-Logo klicken, verschwindet der obere Teil, was seltsam aussieht.

[Vorherige Seite](https://meta.discourse.org/t/horizontal-loading-slider/177939.md?page=2)

[Nächste Seite](https://meta.discourse.org/t/horizontal-loading-slider/177939.md?page=4)
