مجموعة من مؤشرات ماقبل التحميل (Preloaders) و مؤشرات متحركة دائرية مجانية (Spinners)

نظرا للمنظور الجديد في عالم تصميم المواقع ، اصبح من المهم الاهتمام بكل التفاصيل في التصميم حتى نحافظ على النظرة الجمالية في النهاية ، لذا اتجه المصممين الى الاعتناء حتى بمؤشرات ما قبل التحميل لتتواكب مع بنية التصميم ككل.

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

لفترة طويلة كان يتم استخدام صور متحركة GIF لمؤشرات ما قبل التحميل(Preloaders)، ومؤخرا تم استخدام أكواد برمجية تتضمن استخدام إما JS أو CSS ، مما فتح آفاق وإمكانيات لا نهاية لها للمطورين.

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

Spin

1-Spin

Single Element CSS Spinners

2-Single-Element-CSS-Spinners

Spinners

3-Spinners

Spinner

4-Spinner

CSS Spinner

5-CSS-Spinner

CSS Domino Loader

6-CSS-Domino-Loader

Bar/Ball Loader

7-Bar_Ball-Loader

Cube Fold

8-Cube-Fold

CSS Loading Boxes Animation

9-CSS-Loading-Boxes-Animation

Text Filling

10-Text-Filling

Yet Another Loading Animation

11-Yet-Another-Loading-Animation

Google-Inspired CSS Preloaders

12-Google-Inspired-CSS-Preloaders

Reddit Loader

13-Reddit-Loader

Jellyfish Spinner

14-Jellyfish-Spinner

Loader #7

15-loader-7

Another Simple CSS load animation

16-Another-Simple-CSS-load-animation

Loaders and Spinners

17-Loaders-and-Spinners

 

المصدر

 

مقالات ذات صلة

تعليق واحد

  1. محمد علاء
    7 أغسطس,2015 في 2:07 ص - Reply

    بتضاف ازاى انا ضفتها بس اتشغلت ع طول مش ف الصفحة وهى بتحمل بس ؟!!

اضف رد