Горизонтальная столбиковая диаграмма на CSS, без jQuery

Обновлено 2026/05/15

Столбиковые диаграммы на чистом CSS подходят для отображения статистики, прогресса, процентов, результатов опросов, SEO-метрик, загрузки задач и других визуальных данных без подключения тяжелых JS-библиотек.

Такой подход быстрее загружается, проще поддерживается и отлично подходит для лендингов, корпоративных сайтов, админок, блогов и интерфейсов, где не требуется сложная аналитика.

Преимущества CSS-диаграмм:

• минимальная нагрузка на сайт;
• не требуется JavaScript;
• легко интегрируется с любыми современными фреймворками (Bootstrap 5, Tailwind и др.);
• высокая скорость загрузки страницы;
• поддержка accessibility (A11y);
• простая кастомизация через CSS-переменные.

Демо диаграммы

HTML

<div class="chart-item">

 <div class="d-flex justify-content-between align-items-center mb-1">
 <span>Переходы из поисковых систем</span>
 <strong>40%</strong>
 </div>

 <div class="chart-bar"
 role="progressbar"
 aria-label="Переходы из поисковых систем"
 aria-valuenow="40"
 aria-valuemin="0"
 aria-valuemax="100"
 style="--value: 40%">

 <span></span>

 </div>

</div>

CSS

Диаграмма использует CSS-переменную --value, благодаря которой можно задавать ширину столбца прямо в HTML без дополнительных классов.

.chart-demo {
 max-width: 700px;
}

.chart-item {
 margin-bottom: 1.5rem;
}

.chart-bar {
 width: 100%;
 height: 14px;
 background: #e9ecef;
 border-radius: 30px;
 overflow: hidden;
 position: relative;
 box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}

.chart-bar span {
 display: block;
 width: var(--value);
 height: 100%;
 border-radius: 30px;
 background: linear-gradient(90deg, #dc3545, #ff6b6b);
 animation: chart-animation 1.2s ease;
 transition: width .4s ease;
}

@keyframes chart-animation {

 from {
 width: 0;
 }

 to {
 width: var(--value);
 }

}

Вариант на теге progress

Если важна максимальная семантика и поддержка accessibility, можно использовать тег <progress>. Скринридеры и вспомогательные технологии корректно распознают его как индикатор прогресса.

HTML

<label for="seo-progress">
 SEO-трафик — 40%
</label>

<progress id="seo-progress"
 value="40"
 max="100">
</progress>

CSS

progress {
 width: 100%;
 height: 14px;
 border: 0;
 border-radius: 30px;
 overflow: hidden;
}

progress::-webkit-progress-bar {
 background: #e9ecef;
 border-radius: 30px;
}

progress::-webkit-progress-value {
 background: #dc3545;
 border-radius: 30px;
}

progress::-moz-progress-bar {
 background: #dc3545;
 border-radius: 30px;
}

Когда CSS-диаграммы лучше JavaScript-библиотек

Если необходимо показать несколько простых значений или процентов, подключать тяжелые библиотеки вроде Chart.js или ApexCharts не всегда рационально.

CSS-диаграммы особенно удобны:

• на лендингах и промостраницах;
• в административных панелях;
• в email-шаблонах (рекомендуется заменить CSS-переменные на инлайновые стили width: X% для максимальной совместимости);
• в SEO-отчетах;
• в карточках товаров и рейтингах;
• в интерфейсах с высокой скоростью загрузки.

Если же требуется интерактивность, масштабирование, сложные графики, фильтрация, динамическая аналитика и работа с большими массивами данных — лучше использовать специализированные JavaScript-библиотеки.