# شريط تمرير تحميل أفقي

**URL:** https://meta.discourse.org/t/horizontal-loading-slider/177939
**Category:** Theme component
**Tags:** deprecated
**Created:** [1 فبراير 2021، 9:57ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939 "2021-02-01T09:57:32Z")
**Posts on this page:** 20
**Page:** 6

<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: [6 فبراير 2021، 9:48م UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/117 "2021-02-06T21:48:59Z")

</div>

ملاحظة جانبية فقط، لكنني تذكرت مؤخرًا أن XenForo كانت لديها دائمًا شريط تحميل. يسعدني أن أرى أن Discourse لديها الآن شيء مشابه. 🙂

---

<div class="post-metadata">

### Author: ![hawm](https://avatars.discourse-cdn.com/v4/letter/h/f07891/32.png) [@hawm](https://meta.discourse.org/u/hawm)
#### Post date: [7 فبراير 2021، 5:09ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/118 "2021-02-07T05:09:18Z")

</div>

أتساءل أيهما أكثر إزعاجًا عند وجود شبكة ضعيفة.

---

<div class="post-metadata">

### Author: ![PaulinaMX](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulinamx/32/210473_2.png) [@PaulinaMX](https://meta.discourse.org/u/PaulinaMX)
#### Post date: [7 فبراير 2021، 5:16ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/119 "2021-02-07T05:16:34Z")

</div>

رائع! 😍

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7 فبراير 2021، 6:05ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/120 "2021-02-07T06:05:54Z")

</div>

يمكنك محاكاة ظروف الشبكة الضعيفة باستخدام وحدة التحكم f12 في Chrome، إذا رغبت في ذلك.

---

<div class="post-metadata">

### Author: ![neounix](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neounix/32/215617_2.png) [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [7 فبراير 2021، 6:39ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/121 "2021-02-07T06:39:24Z")

</div>

تحديث حول iPhone 6s:

المظهر الآن ممتاز مع السمة الداكنة والعديد من السمات الأخرى على الأجهزة المحمولة.

أحسنت!

تحديث حول سطح المكتب:

لا يزال شريط التمرير بالكاد مرئيًا على متصفح Chromium مع شاشات ROG بحجم 27 و34 بوصة.

هل يمكن إضافة خيار في السمات لتمكين/تعطيلها بناءً على الجهاز المحمول أو سطح المكتب؟

---

<div class="post-metadata">

### Author: ![Mobile](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mobile/32/208701_2.png) [@Mobile](https://meta.discourse.org/u/Mobile)
#### Post date: [7 فبراير 2021، 10:56ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/122 "2021-02-07T10:56:41Z")

</div>

أود أن أقول نفس الشيء 😃 خيار ممتاز جدًا. [![](https://mobilecheats.edu.pl/wp-content/uploads/2020/12/MobileCheatsEduPl-Button-2.png)](https://mobilecheats.edu.pl/de/)

---

<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: [7 فبراير 2021، 12:01م UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/123 "2021-02-07T12:01:04Z")

</div>

يمكنني إعادة إنتاج هذه المشكلة عند استخدام تسجيل الدخول عبر فيسبوك. يبدو أن هذا يسبب معامل عنوان URL `#_=_`

![تسجيل شاشة 2021-02-07 الساعة 12.57.11|فيديو](https://global.discourse-cdn.com/meta/original/3X/8/3/83e9256cf89cb500bf7bb867701c75efe75bc05e.mov)

---

<div class="post-metadata">

### Author: ![REALITY](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/reality/32/199798_2.png) [@REALITY](https://meta.discourse.org/u/REALITY)
#### Post date: [7 فبراير 2021، 1:12م UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/124 "2021-02-07T13:12:38Z")

</div>

لقد اكتشفت أن تعطيل إضافة [discourse-topic-list-previews](https://github.com/paviliondev/discourse-topic-previews) يحل جميع المشكلات المتعلقة بـ [Loading slider](https://meta.discourse.org/t/experiment-on-meta-loading-slider/177939)، وبمجرد إعادة تفعيلها يعود المشكلة.

نحن لا نستخدم أي تسجيل دخول من جهات خارجية، لذا يبدو أن هذا قد يكون خللاً منفصلاً (أو ربما مرتبطًا بطريقة ما؟)

تعديل: في الواقع، مع تفعيل كلتا الإضافتين، تبقى الصفحة ضبابية فقط في المواضيع التي عثرت فيها إضافة [discourse-topic-list-previews](https://github.com/paviliondev/discourse-topic-previews) على صورة لاستبدال الصورة الافتراضية… وصفحة التصنيفات.

---

<div class="post-metadata">

### Author: ![neounix](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neounix/32/215617_2.png) [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [7 فبراير 2021، 1:14م UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/125 "2021-02-07T13:14:40Z")

</div>

متابعة للاختبار على الجوال وسطح المكتب مع العديد من السمات، يبدو أن شيء مثل هذا يعطي نتيجة جميلة لهذا السلايدر الرائع:

```css
  height: 4px;
  
  @media only screen and (min-width: 960px) {
        height: 7px;
  }

```

إضافة بكسل واحد (من 3px إلى 4px) إلى القيمة الافتراضية تبدو رائعة على الجوال؛ وعلى شاشات سطح المكتب الأكبر من 5px تبدو جميلة، لكنني اخترت 7px في الوقت الحالي 🙂

سأعمل على هذا أكثر قليلاً عندما يتوفر لدي وقت، مع اختبار مختلف السمات على سطح المكتب “الكبير” وعلى هواتف آيفون الخاصة بي.

> <https://github.com/unixneo/discourse-loading-slider/blob/main/common/common.scss>

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [8 فبراير 2021، 12:14ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/126 "2021-02-08T00:14:52Z")

</div>

> [@Jonathan5](#):
>
> التلاشي التدريجي عند الظهور والاختفاء هو تحسين. لكنني ما زلت أجد شريط التمرير مُشتتًا.

هل يمكنني العودة إلى الجزء الأول من هذا من فضلك؟ بعد تجربته على سطح المكتب، أجد أن التلاشي التدريجي عند الاختفاء أكثر إزعاجًا من شريط التمرير. أعتقد أن السبب هو أنه عندما أضغط على رابط للانتقال إلى الصفحة ب، أتوقع إما أن تختفي الصفحة أ فورًا (كما كان يفعل ديسكورش سابقًا) أو تبقى هناك حتى تظهر الصفحة ب (كما يحدث مع صفحات الويب).

---

<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: [8 فبراير 2021، 12:38ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/127 "2021-02-08T00:38:05Z")

</div>

مرحبًا، يمكنك استخدام هذا لتعطيل الشفافية. قم بإنشاء مكون جديد في لوحة الإدارة وأضف هذا إلى القسم العام. 🙂

```
body.loading #main-outlet {
  opacity: 1 !important;
}

```

---

<div class="post-metadata">

### Author: ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)
#### Post date: [8 فبراير 2021، 12:53ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/128 "2021-02-08T00:53:41Z")

</div>

> [@دون، مشاركة:127، موضوع:177939](#):
>
> مرحبًا، يمكنك استخدام هذا لتعطيل الشفافية.

ولكن في هذه المرحلة، ما هي قيمة هذا مقارنة بـ الـ spinner؟ هل هو فقط لرؤية شريط التحميل؟

---

<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: [8 فبراير 2021، 12:55ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/129 "2021-02-08T00:55:03Z")

</div>

هذا يقوم فقط بتعطيل تأثير التلاشي. كانت هذه _الإصدار الأول_. شريط تمرير علوي فقط بدون تأثير تلاشي.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [8 فبراير 2021، 1:08ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/130 "2021-02-08T01:08:59Z")

</div>

نوعًا ما …

كانت الدورة الأولى … بدون أي تأثير على الإطلاق، لذا لم تحصل على أي رد فعل مرئي بعد النقر على رابط باستثناء الشريط المنزلق، وهذا لم يكن مثاليًا.

أنا متردد نوعًا ما بين وجود صفحة غير شفافة مقابل صفحة فارغة عند النقر. أتفق معك في أنها قد تكون مشتتة قليلاً، ربما يكون التلاشي إلى الصفر عند النقر أفضل… لست متأكدًا.

---

<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: [8 فبراير 2021، 1:14ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/131 "2021-02-08T01:14:46Z")

</div>

> [@sam](#):
>
> ربما يكون التلاشي إلى 0 عند النقر أفضل

نعم، أعتقد ذلك ربما… الأمر صعب جدًا… ربما تكون التأثيرات القابلة للتغيير جيدة للجميع. 🙂

شخصيًا، أحب ذلك حقًا مع تأثير التلاشي هذا أيضًا. 🙂

المشكلة الوحيدة مع الشفافية 0 هي أنه في هذه المرحلة، يؤثر ذلك فقط على `main-outlet`. بينما يظل `header` و `below-site-header` مرئيين.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [8 فبراير 2021، 1:40ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/132 "2021-02-08T01:40:12Z")

</div>

أعتقد أن التعبير عن ألمي الشخصي مع تأثير التلاشي (على الأقل على سطح المكتب) @awesomerobot / @david

أجد صعوبة بالغة جدًا في قراءة النص الباهت، لذا في كل انتقال يُجبر عقلي على قراءة نص باهت لجزء من الثانية، وهو أمر مرهق بعض الشيء.

ربما لو تلاشى إلى لا شيء كان سيكون أفضل، لا أدري. جزء من المشكلة أيضًا أنني على بعد 250 مللي ثانية، لذا سأقضي على الأقل حوالي 300 مللي ثانية في الانتظار، مما يضمن قضاء بعض الوقت في النظر إلى حروف باهتة.

---

<div class="post-metadata">

### Author: ![neounix](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neounix/32/215617_2.png) [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [8 فبراير 2021، 4:41ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/133 "2021-02-08T04:41:48Z")

</div>

للعلم،

لقد قمت بإلغاء تفعيل انتقال الجسم (النص الباهت)، وأعتقد أنه يبدو جيدًا (وربما يبدو أسرع) عند عدم وجود انتقال للجسم. الفرق ضئيل جدًا…

```css
// body #main-outlet {
// transition: opacity 0.2s ease;
// }

// body.loading #main-outlet {
// opacity: 0.2;
// transition: opacity var(--loading-duration) ease;
// }

```

> **[GitHub - unixneo/discourse-loading-slider: See: ...](https://github.com/unixneo/discourse-loading-slider)**
>
> See: https://community.unix.com/t/new-experimental-slider-loading-transition/381687

---

<div class="post-metadata">

### Author: ![REALITY](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/reality/32/199798_2.png) [@REALITY](https://meta.discourse.org/u/REALITY)
#### Post date: [8 فبراير 2021، 11:55ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/134 "2021-02-08T11:55:05Z")

</div>

شكرًا لك دون، هذا كافٍ 😁

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [8 فبراير 2021، 11:58ص UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/135 "2021-02-08T11:58:11Z")

</div>

> [@seanblue](#):
>
> ولكن في تلك المرحلة، ما هي القيمة المضافة لهذا مقارنة بدائرة التحميل؟ هل هي مجرد رؤية شريط تحميل؟

نعم، على الهاتف المحمول، اعتقدت أن التلاشي حسّن من شكل الشريط، لكنني لم ألحظ ذلك جيدًا على سطح المكتب قبل إدخال التلاشي. (على سطح المكتب، وجدت التلاشي مزعجًا.)

---

<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: [8 فبراير 2021، 12:13م UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/136 "2021-02-08T12:13:43Z")

</div>

ربما تفعيل التلاشي فقط على الأجهزة المحمولة؟ شريط التحميل يذكرني كثيرًا بـ Safari. 🙂

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/9/b952253ba0a4bd5932c430cc9ddfc4ca2c623e1e.png)

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

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