progress-bar.html.twig in Drupal 10

Default theme implementation for a progress bar.

Note that the core Batch API uses this only for non-JavaScript batch jobs.

Available variables:

• label: The label of the working task.
• percent: The percentage of the progress.
• message: A string containing information to be displayed.

1 theme call to progress-bar.html.twig

_batch_progress_page in core/includes/batch.inc

Outputs a batch processing page.

File

core/modules/system/templates/progress-bar.html.twig

{#
/**
 * @file
 * Default theme implementation for a progress bar.
 *
 * Note that the core Batch API uses this only for non-JavaScript batch jobs.
 *
 * Available variables:
 * - label: The label of the working task.
 * - percent: The percentage of the progress.
 * - message: A string containing information to be displayed.
 *
 * @ingroup themeable
 */
#}
<div class="progress" data-drupal-progress>
  {% if label %}
    <div class="progress__label">{{ label }}</div>
  {% endif %}
  <div class="progress__track"><div class="progress__bar" style="width: {{ percent }}%"></div></div>
  <div class="progress__percentage">{{ percent }}%</div>
  <div class="progress__description">{{ message }}</div>
</div>

Related topics

Theme system overview

Functions and templates for the user interface that themes can override.