Loading Animation

// src/components/elements/loading-animation/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/loading-animation
additional-properties: false
properties:
  text:
    type: string
    format: html

// src/components/elements/loading-animation/mocks.yaml

text: ''
$variants:
  - $name: Animation with text
    text: Ihre Daten werden übertragen. <br>Bitte haben Sie einen Moment Geduld.

// src/components/elements/loading-animation/loading-animation.html.twig

<div class="LoadingAnimation js-LoadingAnimation{% if class %} {{ class }}{% endif %}" role="alert" aria-live="assertive">
  <span class="LoadingAnimation-loader">
    {% if not text %}<span class="u-hiddenVisually">Inhalt wird geladen...</span>{% endif %}
  </span>
  {% if text %}<div class="LoadingAnimation-text">{{ text|raw }}</div>{% endif %}
</div>