我想在我的一个表单中添加一个微调器/加载器。场景很简单:当我点击 create 按钮时，它将显示一个微调器/加载器。点击创建按钮时，将调用网络服务，因此微调器/加载器将显示从调用开始到调用结束的整个过程。
下面是我的 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,]);
提交按钮如下:
<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>
如上所述，当我按下 Verify Communication 按钮时，会调用网络服务，在此期间我想显示一个微调器/加载器。
为了创建/显示微调器/加载器，我搜索了很多文章。
但是以上文章都没有提到完整的实现细节。尽管我已经尝试了文章中提到的每一个步骤。
如有任何帮助，我们将不胜感激。
最佳答案
为什么不在每个页面加载时放置加载器而不是提交按钮。这可以通过更改主布局来完成。
<style>
/*loader css*/
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
</style>
为功能添加脚本。
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 0000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("container").style.display = "block";
}
</script>
最后通过body绑定(bind)onload函数调用函数。
<body onload="myFunction()">
<div id="loader"></div>
<section id="container" style="display:none;" class="animate-bottom">
</section>
</body>
关于javascript - 如何在 yii2 php 中添加 spinner/loader，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46828614/