Spinners

Twitter bootstrap Documentation

Border spinner

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->spinner('Loading...');

Colors

Twitter bootstrap Documentation

Result

Source

<?php

foreach (
    [
        'primary', 'secondary', 'success', 'danger',
        'warning', 'info', 'light', 'dark',
    ] as $variant
) {
    echo $this->spinner([
        'variant' => $variant,
        'label' => 'Loading...',
    ]);
}

Growing spinner

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->spinner(['type' => 'grow', 'label' => 'Loading...']);

echo PHP_EOL . '<br/>';

foreach (
    [
        'primary', 'secondary', 'success', 'danger',
        'warning', 'info', 'light', 'dark',
    ] as $variant
) {
    echo $this->spinner([
        'variant' => $variant,
        'type' => 'grow',
        'label' => 'Loading...',
    ]);
}

Alignment

Twitter bootstrap Documentation

Margin

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->spinner([
    'margin' => 5,
    'label' => 'Loading...',
]);

Placement

Twitter bootstrap Documentation

Flex

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->spinner([
    'placement' => 'center',
    'label' => 'Loading...',
]);

echo PHP_EOL . '<br/>';

echo $this->spinner([
    'placement' => 'center',
    'label' => 'Loading...',
    'show_label' => true,
]);

Floats

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->spinner([
    'placement' => 'end',
    'label' => 'Loading...',
]);

Text align

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->spinner([
    'placement' => 'text-center',
    'label' => 'Loading...',
]);

Size

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->spinner([
    'size' => 'sm',
    'label' => 'Loading...',
]);

echo $this->spinner([
    'size' => 'sm',
    'type' => 'grow',
    'label' => 'Loading...',
]);

echo PHP_EOL . '<br/><br/>';

echo $this->spinner([
    'attributes' => ['style' => 'width: 3rem; height: 3rem;'],
    'label' => 'Loading...',
]);

echo $this->spinner([
    'attributes' => ['style' => 'width: 3rem; height: 3rem;'],
    'type' => 'grow',
    'label' => 'Loading...',
]);

Buttons

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->formButton()->renderSpec([
    'options' => [
        'spinner' => true,
        'label' => 'Loading...',
        'show_label' => false,
        'variant' => 'primary',
    ],
    'attributes' => ['disabled' => true],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Loading...',
        'spinner' => true,
        'variant' => 'primary',
    ],
    'attributes' => ['disabled' => true],
]);

echo PHP_EOL . '<br/><br/>';

echo $this->formButton()->renderSpec([
    'options' => [
        'spinner' => [
            'type' => 'grow',
        ],
        'variant' => 'primary',
        'label' => 'Loading...',
        'show_label' => false,
    ],
    'attributes' => ['disabled' => true],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Loading...',
        'spinner' => ['type' => 'grow'],
        'variant' => 'primary',
    ],
    'attributes' => ['disabled' => true],
]);