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

رائع. هل يمكنك تزويدي بمعرف/فئة التعديل حيث لا أريد تغيير لوننا الرباعي؟

تحديث: لا بأس، لقد وجدته.

4 إعجابات

الآن يبدو الأمر رائعًا! عمل ممتاز! :+1:

5 إعجابات

ربما، لكن هذا لا يزال مجرد تجربة في هذه المرحلة.

فقط في حال احتاج أي شخص آخر إلى ذلك:

div.loading-indicator {
  background-color: red
}
17 إعجابًا

@david هل يمكنك تكرار الحركة بنسبة 100% كما في GitHub، حيث يظهر شريط أغمق قليلاً يمتد على كامل العرض أولاً، ثم يبدأ شريط التحميل في الامتلاء، ثم يتلاشى بعد ذلك؟

5 إعجابات

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

16 إعجابًا

هل من الممكن إضافة كلاس للجسم (body class) عندما يكون شريط التحميل نشطًا، حتى نتمكن من إضافة تأثيرات على الأجزاء الأخرى وفقًا لذلك؟
أفكر في تأثير التلاشي من NodeBB: https://community.nodebb.org/
أعتقد أنه يمكن تحقيق ذلك باستخدام شيء مشابه إذا توفّر كلاس للجسم:

body.loading {
    #main-outlet {
        transition: opacity 0.25s;
        opacity: 0;
    }
}
8 إعجابات

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

5 إعجابات

أعجبني الأمر حتى الآن. تفصيل رائع حقًا.

5 إعجابات

شكرًا لك على إضافة الخلفية! يبدو الأمر أفضل بكثير وأكثر ديناميكية الآن. عمل رائع يا @david

5 إعجابات

قرأت منشورات (مثل المنشور رقم 28) في هذا الموضوع، ثم نقرت على الموضوع (للذهاب إلى بداية الموضوع) ولم يكن لدي هذا الأمر.

8 إعجابات

أمر بسيط، لكنني أعتقد أن سماكة الخط التي نستخدمها في مركز المناقشة تعمل بشكل أفضل بكثير

@pmusaraj ما هي سماكة الخط بالبكسل في المركز؟

11 إعجابًا

استخدام مؤقت الموضوع للتنقل يؤدي إلى ظهور مؤشر التحميل بدلاً من شريط التمرير.

8 إعجابات

هي حاليًا 2 بكسل. لكن حسب ما أذكر، يقوم DiscourseHub بقص البكسل العلوي من منطقة العرض عمدًا لتجاوز خطأ في نظام iOS. لذا فإنها تظهر في DiscourseHub كـ 1 بكسل.

12 إعجابًا

أرى ذلك الآن، عند النظر إليه

DiscourseHub 3 بكسل
تحميل المكون + المركز 1 بكسل
تحميل المكون + سفاري 2 بكسل

أود أن أراها جميعًا 3 بكسل :slight_smile:

ملاحظة: يمكننا أن نطلب من المركز الاعتناء بإصلاح المركز

13 إعجابًا

آه، فهمت الآن ما تقصده - التطبيق يحتوي على شريط تحميل خاص به. نعم، 3px تبدو أفضل بكثير :+1:

@pmusaraj هل توجد طريقة لأعرف عبر CSS ما إذا كان Discourse يعمل في الـ hub؟ أو ربما يمكن للتطبيق حقن بعض CSS إضافية؟

10 إعجابات

حسناً، يبدو أننا نضيف فئة (class) للتطبيق فقط على جهاز iPad. في JavaScript، يمكنك التحقق باستخدام أداة isAppWebview() (أو يمكننا إضافة فئة للجسم (body class) لجميع نوافذ DiscourseHub المدمجة، وهو ما سيكون مفيداً على أي حال).

10 إعجابات

أشعر شخصيًا أن هذا تحسن كبير مقارنة بـ Spinner، وينبغي نقله إلى النواة كخيار افتراضي. :clap: إنه

19 إعجابًا

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

14 إعجابًا

تساءلتُ عن سبب ظهور شريط التقدم! أنا أعجبه، عمل رائع @david :clap:

14 إعجابًا

أعجبني ذلك! لكن على شاشة MacBook Retina الخاصة بي، يبدو خافتًا بعض الشيء بالنسبة لذوقي - أشعر أنه يظهر بارتفاع 1 بكسل تقريبًا بدلاً من 3؟ بالكاد يمكن ملاحظته.

4 إعجابات