agorum.progress

Das Cardlet agorum.progress ist ein kleines UI-Cardlet. Es dient zur Darstellung von animierten, kreisförmigen Fortschritts-bzw. Ladeindikatoren. Die Animation läuft vollständig im Browser (SVG SMIL-Animation).

Einfaches Beispiel (ein Spinner + Text)

Das Beispiel zeigt einen minimalen Card-Aufbau, der den Spinner links und einen Text rechts anzeigt.

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'light',
  items: [
    {
      name: 'view',
      type: 'agorum.cards.view',
      width: 250,
      height: 800,
    },
  ],
});

widget.down('view').replace({
  type: 'agorum.horizontal',
  items: [
    {
      type: 'agorum.progress',
      size: 40,
      color: 'primary',
      //background: 'primary' + '-light',
    },
    {
      type: 'agorum.vertical',
      items: [
        {
          type: 'agorum.text',
          text: 'Überschrift',
          size: 'l',
        },
        {
          type: 'agorum.text',
          text: 'Bitte warten...',
        },
      ],
    },
  ],
});

widget;

 

 

Eigenschaften

Das Cardlet unterstützt zwei optionale Eigenschaften. 

Property	Typ	Default	Bedeutung
color	String	'primary'	Farbe des animierten Vordergrund-Kreises (Stroke).
background	String	'gray-2'	Farbe des Hintergrund-Kreises (Stroke).