الرئيسية
CSS والتصميم
مُحول دوارات CSS

مُحول دوارات CSS أنشئ دوارات تحميل وملoaders متحركة مع أساليب قابلة للتخصيص باستخدام CSS.

🎨

مُحول دوارات CSS

أنشئ دوارات تحميل وملoaders متحركة مع أساليب قابلة للتخصيص باستخدام CSS.

اختر نوع السبينر

حدد من بين أنماط سبينر الحدود، النقاط، النبض، أو الحلقة.

تخصيص المظهر

调节 اللون، الحجم، عرض الحدود، وسرعة Animation.

نسخ الكود

معاينة سبينر متحرك ونسخ كود HTML و CSS.

Loading tool...

What Is مُحول دوارات CSS?

مُولِد شريط الانتظار CSS يخلق مؤشرات تحميل متحركة باستخدام CSS النقي. توفر شارات التحميل ردود فعل بصرية للمستخدمين خلال العمليات غير المتزامنة مثل استرجاع البيانات أو تحميل الملفات أو انتقالات الصفحات. يقدم هذا الأداة أربعة أساليب مختلفة لشريط الانتظار: شريط الحد (الدائرة الدوارة الكلاسيكية)، النقاط (النقاط القافزة)، النبض (الدائرة المتوسعة) والحلقة (الحلقة الدوارة). يمكن تخصيص كل نمط بالكامل مع عناصر تحكم للألوان والحجم وعرض الحد وسرعة التحريك. يشمل الكود المُولَد علامات HTML والتعبيرات CSS مع تعريفات @keyframes للرسوم المتحركة. جميع شارات الانتظار خفيفة وذكية ولا تتطلب جافا سكريبت أو مكتبات خارجية. تعمل عبر جميع متصفحات الويب الحديثة وتندمج بسهولة في أي مشروع ويب.

Why Use مُحول دوارات CSS?

أربعة أنماط سبينر متميزة لمختلف السياقات التصميمية
CSS خالص بدون зависимости جافاسكريبت أو مكتبات
حجم، لون، سرعة، وعرض الحدود قابل للتعديل
يشمل الكود المولد HTML و CSS كامل مع keyframes

Common Use Cases

حالات تحميل البيانات

عرض سبينر أثناء استرجاع البيانات من APIs أو قواعد البيانات.

معلومات إرسال النماذج

عرض سبينر على أزرار الإرسال أثناء معالجة النموذج.

تحولات الصفحات

استخدام سبينر أثناء التنقل بين الصفحات أو التغييرات في مسارات تطبيقات الويب الحديثة.

تحميل المحتوى الكسول

عرض مؤشرات التحميل أثناء تحميل الصور أو المكونات.

Technical Guide

تستخدم دوّارات CSS الرسوم المتحركة @keyframes لإنشاء حركة مستمرة. تستخدم تقنية شريط الحد عنصرًا دائريًا مع حد شفاف على większości الجوانب وحد ملون على جانب واحد، ثم تدويره 360 درجة. تستخدم الرسوم المتحركة النقطية تحويلات مقياس لإنشاء تأثير قفز مع تأخير رسوم متحركة منسق. تعمل الرسوم المتحركة النبضية على تغيير حجم عنصر من 0 إلى 1 مع تلاشي الشفافية. تستخدم جميع الرسوم المتحركة الرسوم المتحركة: الاسم المدة دالة الزمن عدد التكرارات. ضبط عدد التكرارات على لا نهاية يضمن التكرار المستمر. تحكم وظيفة توقيت الرسوم المتحركة (السهولة، الخطي، سهلة-داخل-خارج) منحنيات السرعة. لأسباب تتعلق بالوصول، أضف دور = "الحالة" وتسمية وصفية إلى شارات الانتظار. فكّر في استخدام استفسار الوسائط المفضل لتحريك الحد الأدنى لإيقاف أو تقليل الرسوم المتحركة للمستخدمين الذين يفضلون تحrickة مخفضة.

Tips & Best Practices

1
استخدم animation-timing-function: linear للحصول على دوران سلس ومستمر
2
أضف تفاصيل prefers-reduced-motion لتحسين إمكانية الوصول
3
احتفظ بحجم السبينر مناسبًا - 48px هو المعيار، 24px للتركيب الداخلي
4
استخدم aria-label="Loading" لتسهيل قراءة الشاشة

Related Tools

مكان تجريبي لتحويلات CSS

جرب تحويلات CSS بما في ذلك الدوران والتكبير والانحناء والانتقال مع منظور ثلاثي الأبعاد.

🎨 CSS & Design

مُولِد حركة CSS

أنشئ animations keyframe في CSS مع تأثيرات مسبقة ووقت قابل للتعديل.

🎨 CSS & Design

مُولِد انتقالات CSS

انشئ انتقالات CSS مع خاصية قابلة للتخصيص، مدة، تخفيف، وتأثيرات عند التحويل.

🎨 CSS & Design

مُولِد استفسارات الوسائط

إنشاء استفسارات الوسائط CSS مع شروط الميزات و نقاط التوقف المسبقة.

🎨 CSS & Design

Frequently Asked Questions

Q هل سبينرات CSS قابلة للاستخدام من قبل ذوي الإحتياجات الخاصة؟

أضف role="status" و aria-label="Loading" إلى عنصر السبينر. كما احترم تفاصيل prefers-reduced-motion.

Q هل يمكنني تغيير اتجاه الدوران؟

نعم، قم بتغيير @keyframes من rotate(360deg) إلى rotate(-360deg) لتحصل على دوران عكسي.

Q كيف أцентر السبينر على الصفحة؟

استخدم flexbox: display: flex; justify-content: center; align-items: center في حاوية الأبوين.

Q هل ستعمل سبينرات CSS في المتصفحات القديمة؟

دعم animations و border-radius متوفر في IE10+ والمتصفحات الحديثة جميعها.

Q كيف أغير سرعة Animation؟

调节 قيمة مدة Animation. القيم الأقل (0.5s) تجعلها أسرع، والقيم الأعلى (2s) تجعلها أبطأ.

About This Tool

مُحول دوارات CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.