المستخدمة مؤخرًا

    افتح أداة وستظهر هنا.

    منشئ شريط التقدم

    تصميم أشرطة تقدم متحركة

    مشاركة هذه الأداة

    الإبلاغ عن مشكلة

    صف المشكلة دون تضمين مدخلات أو ملفات خاصة.

    ما مدى فائدة هذه الأداة؟

    ما مدى فائدة هذه الأداة؟

    صمّم شريط التقدم

    اختر شكلًا وسمة، ثم اضبط التفاصيل.

    سمات سريعة
    المزيد من الإعدادات
    الأبعاد والشكل
    الألوان والتدرج
    إعدادات الحدود
    التسميات
    الحركة والتأثيرات

    المعاينة والشيفرة

    خلفية المعاينة

    تتكيف المعاينة مع هذه اللوحة. تبقى أبعاد التصدير والشيفرة بالحجم الذي اخترته.

    تم تحديث المعاينة. انسخ HTML وCSS معًا لاستخدامهما في مشروعك.

    معاينة تصدير PNG

    PNG هو عرض ثابت بخلفية بيضاء. يستخدم نمط اللوحة الأصلي: تُطبق التدرجات والحدود على الأشرطة الخطية فقط؛ أما توهج CSS والخطوط المائلة والنبض والانتقالات فمتاحة في المعاينة المباشرة وفي الشيفرة.

    ترميز HTML
    <div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-label">
    جارٍ التحميل... 65%
  </div>
</div>
    أنماط CSS
    .progress-container {
  width: 400px;
  max-width: 100%;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  
  
}

.progress-bar {
  height: 100%;
  width: 65%;
  background: #3b82f6;
  border-radius: 10px;
  transition: width 1.5s ease-in-out;
  
  
  
}





.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1f2937;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

    HTML وCSS يعملان معًا. وهما يصفان هذه القيمة الثابتة؛ اربط تحديثات التقدم ودلالات إمكانية الوصول في تطبيقك.

    نصائح سريعة
    • خطي: مؤشرات التحميل ورفع الملفات.
    • دائري: المقاييس وتمثيل المهارات.
    • نصف دائري: مقاييس لوحات المعلومات واستهلاك الحصص.
    • عمودي: مؤشرات البطارية والتخزين.
    • نقاط: ترقيم الصفحات والتقدم عبر تسلسل.
    • متدرج بخطوات: المراحل الرئيسية في العمليات متعددة الخطوات.

    حول منشئ شريط التقدم، مولد شريط تقدم CSS مجاني

    صمّم أشرطة تقدم جميلة ومتحركة بألوان وتسميات وتأثيرات قابلة للتخصيص. انسخ HTML وCSS معًا، أو صدّر صورة PNG ثابتة بالأبعاد المحددة. تتوفر ست أشكال وست سمات وثلاثة منحنيات انتقال. تستخدم صورة PNG أداة عرض مستقلة على canvas: تُطبَّق التدرجات والحدود على الأشرطة الخطية فقط، ولا تتضمن حركة CSS ولا الخطوط المائلة ولا التوهج. راجع الناتج في تخطيطك المستهدف قبل دمج مولد شريط التقدم المتاح عبر الإنترنت هذا.

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

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

    التصميم

    أضيفت حديثًا

    كل الأدوات

    إعدادات الخصوصية

    اختر تفضيلاتك للتحليلات والإعلانات والتخصيص. يُبقي التخزين الأساسي ميزات مثل المظهر والأدوات المحفوظة تعمل.

    التخزين الأساسي مفعّل دائمًا.