Spinner Widget Spinner.php

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The Spinner widget is a wrapper for the spin.js plugin. It enables you to add an animated CSS3 loading spinner which allows VML fallback for IE. Since, it is not image based (relies on pure CSS), it allows you to configure the spinner style, size, color, and other CSS attributes. The major advantage of using the CSS3 based spinner, is that the animation can be made visible to user for non-ajax based scenarios on most modern browsers. For example, on events like window.load or window.unload (thereby enabling you to show a page loading progress without using ajax).

The parameters available for the Spinner widget configuration are:
  • preset: string|boolean the spinner preset to apply. This can be set to one of the following:

    • Spinner::TINY or 'tiny'

    • Spinner::SMALL or 'small'

    • Spinner::MEDIUM or 'medium'

    • Spinner::LARGE or 'large'

    The preset is validated based on these settings:
    • if this is set to one of 'tiny', 'small', or 'large', it will override any other settings in pluginOptions

    • if this is set to a string other than the defined presets

      • if pluginOptions is also set, then it will create a preset with this name for the client session and apply the settings
      • if pluginOptions is not set, an InvalidConfigException will be raised
    • if this is set to false, the spinner will be stopped and removed.

    • if this is not set or is null, the settings in pluginOptions will be used.

  • color: string the color (hex/name) to apply to the spinner. If not specified, it will inherit the spinner container color.

  • hidden: boolean boolean is the spinner hidden by default. Defaults to false.

  • align: string alignment of the spinner with respect to the parent, defaults to 'center'. If set to 'left' or 'right', this will wrap it in a container with the respective floats. By default, the spinner will be aligned 'center' and 'top' of the parent element.

  • caption: string caption embedded inside the spinner. This is not HTML encoded. If you set it to an empty string, this will not be displayed..

  • captionOptions: array the HTML attributes for the caption container. The following additional attributes can be set:

    • tag: string the tag for rendering the container. Defaults to span.

  • spinOptions: array the HTML attributes for the spinner container. The following additional attributes can be set:

    • tag: string the tag for rendering the container. Defaults to span.

  • options: array the HTML attributes for the combined spinner + caption container. The following additional attributes can be set:

    • tag: string the tag for rendering the container. Defaults to span.

  • pluginOptions: array the plugin settings/options for the plugin. There are a quite a few options you can set in this plugin. Refer the plugin documentation for details.

 

Large spinner aligned left with inherited color from parent container (inside a div element)

 

Medium spinner aligned center with blue color (inside a div element)

 

Small spinner aligned right with hex color (inside a div element)

Tiny spinner aligned left with caption text (inside a button)

use kartik\widgets\Spinner
// Large spinner aligned left with inherited color from parent container (inside a div element)
echo '<div class="well">';
	echo Spinner::widget(['preset' => 'large', 'align' => 'left']);
	echo '<div class="clearfix"></div>';
echo '</div>';

// Medium spinner aligned center with blue color (inside a div element)
echo '<div class="well">';
	echo Spinner::widget(['preset' => 'medium', 'align' => 'center', 'color' => 'blue']);
	echo '<div class="clearfix"></div>';
echo '</div>';

// Small spinner aligned right with hex color (inside a div element)
echo '<div class="well">';
	echo Spinner::widget(['preset' => 'small', 'align' => 'right', 'color' => '#5CB85C']);
	echo '<div class="clearfix"></div>';
echo '</div>';

// Small spinner aligned left with caption text (inside a button element)
echo '<button class="btn btn-primary btn-sm">';
	echo Spinner::widget(['preset' => 'tiny', 'align' => 'left', 'caption' => 'Loading &hellip;']);
echo '</button>';