---
url: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D8%B5%D8%B1/%D8%B9%D8%AF%D8%A7%D8%AF-%D8%AF%D8%A7%D8%A6%D8%B1%D9%8A'
title: 'إضافة عنصر عدّاد دائري | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:27:39+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'تحصلون على حلقة متحركة تمتلئ لتعرض رقمًا رئيسيًا واحدًا، مثل معدّل أو نتيجة. استخدموها لإبراز إحصائية على صفحة هبوط أو صفحة تعريفية.'
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'إضافة عنصر عدّاد دائري'
      description: 'تحصلون على حلقة متحركة تمتلئ لتعرض رقمًا رئيسيًا واحدًا، مثل معدّل أو نتيجة. استخدموها لإبراز إحصائية على صفحة هبوط أو صفحة تعريفية.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:27:39+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D8%B5%D8%B1/%D8%B9%D8%AF%D8%A7%D8%AF-%D8%AF%D8%A7%D8%A6%D8%B1%D9%8A'
      articleSection: 'البيانات والحركة'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D8%B5%D8%B1/%D8%B9%D8%AF%D8%A7%D8%AF-%D8%AF%D8%A7%D8%A6%D8%B1%D9%8A'
      description: 'تحصلون على حلقة متحركة تمتلئ لتعرض رقمًا رئيسيًا واحدًا، مثل معدّل أو نتيجة. استخدموها لإبراز إحصائية على صفحة هبوط أو صفحة تعريفية.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: الرئيسية
            item: 'https://dxpr.com/ar'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ar
---
[مركز المساعدة](/ar/hc)/[التوثيق](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82) /[تعلّم DXPR Builder](/ar/hc/documentation/learn-dxpr-builder) /[بناء الصفحات](/ar/hc/documentation/learn-dxpr-builder/build) /[إضافة المحتوى](/ar/hc/documentation/learn-dxpr-builder/elements) /[البيانات والحركة](/ar/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # إضافة عنصر عدّاد دائري.

 تعلّم DXPR Builderبناء الصفحاتإضافة المحتوىالبيانات والحركة

   ## في هذا الدليل

 أدلة ذات صلة

- [تغيير مظهر عنصر في لوحة النمط](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%B5%D8%B1/%D8%AA%D8%A8%D9%88%D9%8A%D8%A8-%D8%A7%D9%84%D9%86%D9%85%D8%B7)

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

## إضافة عنصر عدّاد دائري

افتحوا صفحتكم بعد تسجيل الدخول: تظهر عناصر تحكم المنشئ عندما تحومون فوق منطقة المحتوى. وتعرض صفحة [صفحتكم الأولى](/ar/hc/%D8%A7%D9%84%D8%AA%D9%88%D8%AB%D9%8A%D9%82/%D8%AA%D8%B9%D9%84%D9%85-dxpr-builder/%D8%A7%D9%84%D8%A8%D8%AF%D8%A1/%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9-%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%89) الأساسيات.

1. حوموا فوق العمود وانقروا **+** في شريط التحكم، أو انقروا **إضافة العناصر** على صفحة فارغة. افتحوا تبويب **المحتوى** وانقروا **العدّاد الدائري**. يظهر أعلى العمود ويفتح مربع حوار الإعدادات.
2. اسحبوا منزلق **النسبة المئوية** لتحديد مدى امتلاء الحلقة، أو اكتبوا القيمة في المربع المجاور له. هنا نضبط 78.
3. اختاروا لون القوس في **لون المقدّمة**.
4. افتحوا قسم محتوى الدائرة واكتبوا تسمية **النص** للمقياس.
5. في حقل **الأيقونة** أدناه، اكتبوا chart في مربع **البحث** وانقروا أيقونة في الشبكة.
6. انقروا **حفظ** في مربع الحوار. ثم انقروا **حفظ** في شريط الأدوات أعلى منطقة المحتوى لتخزين الصفحة.

  ## ما ترونه

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

## إعداد عنصر العدّاد الدائري

حوموا فوق العنصر وافتحوا **المزيد > الإعدادات** في شريط التحكم. الخيارات:

- **النسبة المئوية:** مدى امتلاء الحلقة، من 0 إلى 100.
- **البعد:** حجم الدائرة بالبكسل، من 100 إلى 500.
- **لون المقدّمة:** لون القوس الممتلئ.
- **لون الخلفية:** لون المسار الفارغ.
- **لون التعبئة:** اللون داخل الدائرة.
- **عرض المقدّمة:** سُمك القوس.
- **الحركة:** تملأ القوس من الصفر. يضبط **مدة الحركة** و**تأخير الحركة** التوقيت بالمللي ثانية.
- **الحركة عند الظهور:** تنتظر التحرك حتى تصل الدائرة إلى الشاشة أثناء التمرير.

لكل منزلق مربع أرقام بجانبه للقيم الدقيقة. ويحدد قسم **محتوى الدائرة** ما يظهر في الوسط:

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

## إذا لم يظهر لكم

- **العدّاد الدائري ليس في تبويب المحتوى.** ملف تعريف المستخدم الخاص بكم يخفيه. اطلبوا من المسؤول تفعيله في [ملفات تعريف المستخدم](/ar/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **اختفى بعد إعادة التحميل.** لم يتم حفظ الصفحة. أضيفوه مجددًا وانقروا **حفظ** في شريط الأدوات أعلى منطقة المحتوى.
- **الحلقة باهتة أو مفقودة.** **لون المقدّمة** و**لون الخلفية** قريبان جدًا من لون الصفحة. حوموا فوق العنصر وافتحوا **المزيد > الإعدادات**، ثم اختاروا ألوانًا بتباين أكبر.
- **الحلقة لا تتحرك.** **الحركة** متوقفة، أو تنتظر الحلقة حتى تصل إلى الشاشة. شغّلوا **الحركة** ومرّروا حتى تظهر الدائرة في الشاشة.
- **النص والأيقونة لا يظهران.** **عرض التقدم** مفعّل، فتعرض الحلقة النسبة بدلًا منهما. أوقفوا **عرض التقدم** تحت **محتوى الدائرة**.

## ما الخطوة التالية؟

[تبويب النمط](/ar/hc/documentation/learn-dxpr-builder/element-settings/style-tab) لتغيير التباعد والخلفية لعنصر العدّاد الدائري.