How to add spinner/loader in yii2 php

I want to add a spinner/loader in on of my form. The scenario is simple that when i hit on create button than it will show a spinner/loader. On hitting the create button a call to web-service is made so the spinner/loader will shows from the call start to call end.

Below is my controller

$m = MetersInventoryStore::findOne($_REQUEST['selected_meters']);
$msn = $m->meter_serial; // current selected meter serial number is saved

$date_time = str_replace(' ', 'T', date('Y-m-d H:i:s')); // current date time

$api_url = 'http://xx.xxx.xxx.xxx:7000/api/meters/GetByMsn/' . $msn . '/' .$date_time; // my base URL

$curl = curl_init($api_url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 1000);
curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization:key'));

$curl_response = curl_exec($curl);
$json = json_decode($curl_response);
$meter_alive = $json->data->Response;
.
.
.
.
// my other code that is saving data
.
.
.
.
return $this->render('create', ['model' => $model,]);

The submit button is below

<div class="form-group">
   <?= Html::submitButton($model->isNewRecord ? 'Verify Communication' : 'Update', ['id'=> 'spin','name'=>'create','class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-success']) ?>

</div>

As told above when i press the Verify Communication button a call is made to the web-service and during this time i want to show a spinner/loader.

For creating/showing a spinner/loader I have searched many articles.

1. Show Loading
2. Kartik Spinner
3. Submit Spinner
4. Yii2 Model Loader
5. Yii2 Jquery Loading

But none of the above articles have mentioned the full implementation details. Although I have tried each and every steps mentioned in the articles.

Any help would be highly appreciated.

from How to add spinner/loader in yii2 php