حدد حالة تحميل أحد المكونات أو الصفحة باستخدام أقراص Bootstrap التي تم إنشاؤها بالكامل باستخدام HTML و CSS وبدون JavaScript.
حول
يمكن استخدام Bootstrap "spinners" لإظهار حالة التحميل في مشروعاتك. لقد تم إنشاؤها باستخدام HTML و CSS فقط ، مما يعني أنك لست بحاجة إلى أي JavaScript لإنشائها. ومع ذلك ، ستحتاج إلى بعض جافا سكريبت مخصص لتبديل رؤيتها. يمكن تخصيص مظهرها ومواءمتها وحجمها بسهولة من خلال فئات المرافق المذهلة لدينا.
لأغراض إمكانية الوصول ، يشتمل كل محمل هنا role="status"على ملف <span class="sr-only">Loading...</span>.
الدوار الحدودي
استخدم الدوافع الدوارة لمؤشر تحميل خفيف الوزن.
جار التحميل...
الألوان
يستخدم الحد الدوار currentColorمن أجله border-color، مما يعني أنه يمكنك تخصيص اللون باستخدام أدوات مساعدة لون النص . يمكنك استخدام أي من أدوات ألوان النص المساعدة على القرص الدوار القياسي.
جار التحميل...
جار التحميل...
جار التحميل...
جار التحميل...
جار التحميل...
جار التحميل...
جار التحميل...
جار التحميل...
لماذا لا تستخدم border-colorالمرافق؟ تحدد كل أداة تدوير حدية حدًا transparentلجانب واحد على الأقل ، لذلك .border-{color}ستتجاوز الأدوات المساعدة ذلك.
تزايد الدوار
إذا كنت لا تتخيل قرصًا دوارًا حدوديًا ، فقم بالتبديل إلى أداة زيادة التدوير. في حين أنه لا يدور من الناحية الفنية ، فإنه ينمو بشكل متكرر!
جار التحميل...
مرة أخرى ، تم تصميم هذا القرص الدوار currentColor، بحيث يمكنك بسهولة تغيير مظهره باستخدام أدوات ألوان النص . هنا باللون الأزرق ، جنبًا إلى جنب مع المتغيرات المدعومة.
جار التحميل...
جار التحميل...
جار التحميل...
جار التحميل...
جار التحميل...
جار التحميل...
جار التحميل...
جار التحميل...
محاذاة
تم تصميم Spinners في Bootstrap باستخدام rems currentColorو و display: inline-flex. هذا يعني أنه يمكن بسهولة تغيير حجمها وإعادة تلوينها ومحاذاتها بسرعة.
أضف .spinner-border-smوصنع .spinner-grow-smقرصًا أصغر حجمًا يمكن استخدامه بسرعة داخل المكونات الأخرى.
جار التحميل...
جار التحميل...
أو استخدم أنماط CSS مخصصة أو أنماط مضمنة لتغيير الأبعاد حسب الحاجة.
جار التحميل...
جار التحميل...
أزرار
استخدم الأزرار الموجودة داخل الأزرار للإشارة إلى إجراء قيد المعالجة أو قيد التنفيذ حاليًا. يمكنك أيضًا تبديل النص من عنصر الزيادة واستخدام نص الزر حسب الحاجة.