---
url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D1%80%D1%83%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D1%96%D1%87%D0%B8%D0%BB%D1%8C%D0%BD%D0%B8%D0%BA'
title: 'Додавання кругового лічильника | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:58:37+00:00'
updated: '2026-10-24T20:08:10+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-24T20:08:10+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: '2026-10-24T19:58:37+0000'
      dateModified: '2026-10-24T20:08:10+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/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D1%80%D1%83%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D1%96%D1%87%D0%B8%D0%BB%D1%8C%D0%BD%D0%B8%D0%BA'
      articleSection: 'Дані й анімація'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D1%80%D1%83%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D1%96%D1%87%D0%B8%D0%BB%D1%8C%D0%BD%D0%B8%D0%BA'
      description: 'Ви отримуєте анімоване кільце, що заповнюється, щоб показати одне ключове число, наприклад показник або оцінку. Використовуйте його, щоб виокремити статистику на цільовій сторінці чи сторінці про нас.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/uk'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: uk
---
[Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Додавання вмісту](/uk/hc/documentation/learn-dxpr-builder/elements) /[Дані й анімація](/uk/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Додавання кругового лічильника.

 Вивчення DXPR BuilderСтворення сторінокДодавання вмістуДані й анімація

   ## In this guide

 Related guides

- [Зміна вигляду елемента на панелі «Стиль»](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-%D1%81%D1%82%D0%B8%D0%BB%D1%8E)

Ви отримуєте анімоване кільце, що заповнюється, щоб показати одне ключове число, наприклад показник або оцінку. Використовуйте його, щоб виокремити статистику на цільовій сторінці чи сторінці про нас.

## Додавання кругового лічильника

Відкрийте свою сторінку, увійшовши до сайта: елементи керування конструктором з’являються, коли ви наводите вказівник на область вмісту. Основи показує сторінка [Ваша перша сторінка](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D0%BF%D0%B5%D1%80%D1%88%D0%B0-%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0).

1. Наведіть вказівник на стовпець і натисніть **+** на його панелі керування або натисніть **Додати елементи** на порожній сторінці. Відкрийте вкладку **Вміст** і натисніть **Круговий лічильник**. Він з’явиться вгорі стовпця, і відкриється діалог його налаштувань.
2. Перетягніть повзунок **Відсоток**, щоб задати заповнення кільця, або введіть значення в поле поруч із ним. Тут ми задаємо 78.
3. Виберіть колір дуги в полі **Колір переднього плану**.
4. Відкрийте розділ «Вміст кола» й введіть мітку **Текст** для метрики.
5. У полі **Значок** нижче введіть chart у полі **Пошук** і натисніть значок у сітці.
6. Натисніть **Зберегти** у діалозі. Потім натисніть **Зберегти** на панелі інструментів угорі області вмісту, щоб зберегти сторінку.

  ## Що ви бачите

Кільце заповнюється до заданого вами відсотка, а ваші значок і мітка містяться посередині. У відео воно фіолетове, заповнене на 78 відсотків, із написом Renewal rate. Кільце анімується, коли прокручується в область перегляду. Відвідувачі побачать його, коли ви збережете сторінку й її буде опубліковано.

## Налаштування кругового лічильника

Наведіть вказівник на елемент і відкрийте **Більше > Налаштування** на його панелі керування. Параметри:

- **Відсоток:** заповнення кільця від 0 до 100.
- **Розмір:** розмір кола в пікселях від 100 до 500.
- **Колір переднього плану:** колір заповненої дуги.
- **Колір тла:** колір порожньої доріжки.
- **Колір заливки:** колір усередині кола.
- **Ширина переднього плану:** товщина дуги.
- **Анімація:** заповнює дугу з нуля. **Тривалість анімації** і **Затримка анімації** задають час у мілісекундах.
- **Анімація в області перегляду:** чекає з анімацією, доки коло не прокрутиться в область перегляду.

Кожен повзунок має поле з числом поруч для точних значень. Розділ **Вміст кола** визначає, що показується посередині:

- **Показувати прогрес:** показує число відсотка замість ваших тексту й значка. За промовчуванням вимкнено.
- **Текст:** коротка мітка. **Розмір шрифту** і **Колір тексту** її оформлюють.
- **Інформація:** менший другий рядок під текстом.
- **Значок:** значок перед текстом. Розкривний список біля поля **Пошук** обмежує сітку одним набором значків. **Розмір значка** і **Колір значка** його оформлюють.

## Якщо ви його не бачите

- **Кругового лічильника немає на вкладці «Вміст».** Ваш профіль користувача його приховує. Попросіть адміністратора увімкнути його в розділі [Профілі користувачів](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B0%D0%B4%D0%BC%D1%96%D0%BD%D1%96%D1%81%D1%82%D1%80%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%BF%D1%80%D0%BE%D1%84%D1%96%D0%BB%D1%96-%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%87%D1%96%D0%B2).
- **Він зник після перезавантаження.** Сторінку не було збережено. Додайте його знову й натисніть **Зберегти** на панелі інструментів угорі області вмісту.
- **Кільце бліде або відсутнє.** **Колір переднього плану** і **Колір тла** надто близькі до кольору сторінки. Наведіть вказівник на елемент і відкрийте **Більше > Налаштування**, потім виберіть кольори з більшим контрастом.
- **Кільце не анімується.** **Анімація** вимкнена, або кільце чекає, доки прокрутиться в область перегляду. Увімкніть **Анімацію** і прокрутіть коло в область перегляду.
- **Ваші текст і значок не показуються.** **Показувати прогрес** увімкнено, тож кільце показує відсоток замість них. Вимкніть **Показувати прогрес** у розділі **Вміст кола**.

## Що далі?

[Вкладка «Стиль»](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-%D1%81%D1%82%D0%B8%D0%BB%D1%8E), щоб змінити відступи й тло свого кругового лічильника.