c006/yii2-submit-spinner

Adds a div overlay with a spinning loader on submit

Yii2 Submit Spinner

Current version 1.1.0, _(*1)

• New add-on, form_validate

Installation

The preferred way to install this extension is through composer., _(*2)

Either run, _(*3)

php composer.phar require --prefer-source "c006/yii2-submit-spinner" "dev-master", _(*4)

or add, _(*5)

"c006/yii2-submit-spinner": "dev-master", _(*6)

to the require section of your composer.json file., _(*7)

Required

• jQuery, _(*8)

• yii \ widgets \ ActiveForm, _(*9)

Options

class_id => {string}
The ID of the container. default: "SubmitSpinner", _(*10)

form_id => {string}
The ID of the form, _(*11)

bg_color => {string}
Color of the overlay, _(*12)

bg_opacity => {float}
Opacity of the overlay, _(*13)

spin_speed => {int}
How many seconds a for a complete 360 rotation, _(*14)

radius => {int}
Pixel radius/width of the spinner, _(*15)

bg_spinner_opacity => {float}
Opacity of main spinner, _(*16)

bg_spinner_color => {string}
Color of main spinner, _(*17)

sections => {int}
How many dots or circles, _(*18)

section_size => {int}
Dot/circle size in px, _(*19)

section_color => {string}
Color of dots/circles, _(*20)

section_offset => {int}
How far from the center in px, _(*21)

section_opacity_base => {float}
Minimum opacity e.g. 0.25, _(*22)

proportionate_increase => {boolean}
Will increase/decrease dots proportionally to the main spinner, _(*23)

form_validate => {boolean}
Will trigger on successful ActiveForm validation, _(*24)

Demo

Demo: http://demo.c006.us, _(*25)

Usage

Added javascript functions, _(*26)

• show_submit_spinner(), _(*27)

• hide_submit_spinner(), _(*28)

Once the extension is installed, simply use it in your code by :, _(*29)

Defaults option:, _(*30)

> = \c006\spinner\SubmitSpinner::widget(); ?>, _(*31)

All options: (using defaults), _(*32)

> = c006\spinner\SubmitSpinner::widget( [ 'form_id' => $form->id, 'bg_color' => '#444444', 'bg_opacity' => 0.8, 'spin_speed' => 4, 'radius' => 200, 'bg_spinner_opacity' => 0.5, 'bg_spinner_color' => '#000000', 'sections' => 15, 'section_size' => 20, 'section_color' => '#FFFFFF', 'section_offset' => 80, 'section_opacity_base' => .2, 'proportionate_increase' => 1, ] ) ?>, _(*33)

All options: (5 large dots only, no background spinner), _(*34)

> = c006\spinner\SubmitSpinner::widget( [ 'form_id' => $form->id, 'bg_color' => '#333333', 'bg_opacity' => 0.8, 'spin_speed' => 4, 'radius' => 250, 'bg_spinner_opacity' => 0.0, 'bg_spinner_color' => '#000000', 'sections' => 5, 'section_size' => 80, 'section_color' => '#FFFFFF', 'section_offset' => 80, 'section_opacity_base' => .2, 'proportionate_increase' => 0, ] ) ?>, _(*35)

Comments / Suggestions

Please provide any helpful feedback or requests., _(*36)

Thanks., _(*37)