مولّد محمّلات CSS

ما هي مولّد محمّلات CSS؟

مولّد محمّلات CSS أداة مجانية تعمل داخل المتصفح لمصممي الويب ومطوّري الواجهة الأمامية الذين يحتاجون مؤشّر تحميل بـ CSS خالص دون إضافة مكتبة. اختر من بين خمسة أنماط - سبينر وحلقة ونقاط وأشرطة ونبضة - ثم تحكّم في الحجم بالبكسل، واللون الرئيسي، وسرعة دورة الحركة الواحدة بالثواني، وسُمك الخط، وعدد النقاط أو الأشرطة. تتحرك معاينة مباشرة أثناء التحرير، ويتحدث ترميز HTML المطابق مع كتلة نمط CSS تتضمن @keyframes فورًا حتى تضعها مباشرة في صفحة. استخدمه للأزرار، ومحمّلات الصفحات، وحالات الهيكل، والعناصر النائبة غير المتزامنة، أو لتتعلّم كيف تُحرّك حركة CSS و@keyframes كل تأثير.

كيفية استخدام مولّد محمّلات CSS

1. اختر نمط المحمّل: سبينر، حلقة، نقاط، أشرطة، أو نبضة.
2. حدّد الحجم بالبكسل واختر لونًا عبر عيّنة اللون أو بكتابة قيمة.
3. حدّد سرعة الحركة بالثواني لدورة كاملة واحدة.
4. افتح الإعدادات لضبط سُمك الخط (السبينر والحلقة) أو عدد النقاط أو الأشرطة.
5. شاهد المعاينة المباشرة وهي تتحرك، ثم انسخ HTML و CSS المُولَّدين بزر النسخ.

أمثلة

النمط: سبينر، الحجم 48px، اللون #4f86f7، السرعة 1s، السُمك 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

النمط: نقاط، الحجم 48px، اللون #9333ea، السرعة 1s، العدد 3

<div class="dd-loader"><div></div><div></div><div></div></div> مع animation-delay متدرّج لتتكبّر النقاط وتتصاغر بشكل موجي.

الأسئلة الشائعة

ما أنماط المحمّل المتاحة؟

خمسة: سبينر (قوس يدور)، حلقة (حلقة أسمك تدور)، نقاط (نقاط تتكبّر وتتصاغر بشكل موجي)، أشرطة (أشرطة تمتدّ لأعلى وأسفل)، ونبضة (دائرة واحدة نابضة). بدّل عبر قائمة الأنماط فتتحدث المعاينة والشيفرة فورًا.

ماذا تفعل عناصر التحكم في الحجم واللون والسرعة؟

الحجم يضبط أبعاد المحمّل بالبكسل، واللون يضبط اللون الرئيسي (استخدم منتقي العيّنة أو اكتب أي لون CSS)، والسرعة هي مدة دورة حركة واحدة بالثواني. السُمك يتحكم في خط السبينر والحلقة، بينما يتحكم العدد في كم نقطة أو شريط يظهر.

هل CSS المُولَّد خالص دون أي JavaScript؟

نعم. المقتطف هو HTML عادي إضافة إلى كتلة <style> تستخدم حركة CSS و@keyframes، فيعمل دون أي JavaScript أو مكتبة خارجية. ألصقه في صفحتك فيعمل بمفرده.

لماذا لا يغيّر السُمك والعدد كل نمط؟

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

هل يُرفَع أي شيء إلى خادم؟

لا. يُبنى المحمّل وCSS الخاص به بالكامل داخل متصفحك بعمليات نصية محلية - ولا تُرسَل أي إعدادات أو ألوان أو شيفرة إلى أي خادم أبدًا، فيعمل دون اتصال ويحافظ على خصوصية عملك.