مولّد مؤشر التحميل (Loader / Spinner) بـ CSS

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

نمط مؤشر التحميل

اللون

الحجم: 48px

السرعة: 1s

شيفرة HTML + CSS

<style>
.byteryo-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #4f46e533;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: byteryo-spin 1s linear infinite;
}

@keyframes byteryo-spin {
  to { transform: rotate(360deg); }
}
</style>

<div class="byteryo-spinner"></div>

كيف يعمل

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

هل تعمل الشيفرة الناتجة بدون JavaScript؟

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

كيف أعرض مؤشر التحميل أثناء التحميل فقط؟

أضف كتلة HTML الخاصة بالمؤشر أو أزلها ديناميكيًا (أو بدّل صنفًا يطبّق display: none) باستخدام إطار JavaScript المعتاد لديك عند جريان طلب أو معالجة، ثم أخفِه بمجرد أن يصبح المحتوى جاهزًا.

تُولَّد الشيفرة فورًا في متصفحك انطلاقًا من إعداداتك، دون أي اتصال بخادم.