我想在远程脚本运行时和我的前端页面处于“正在等待...”状态时添加加载微调器。 我只有1个php页面和一个CSS。 (目前仍在测试中,所以我还没有分割脚本页面和html页面)。在调用远程服务器期间,PHP内部的基本加载器微调器
我为装载机下面的CSS:
style.css的编辑来代替 “”以 “#”
#loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
我的页面看起来像这样(清洗后): 编辑与webbm评论
<!DOCTYPE html>
<html>
<head>
<title> BETA APP HOME PAGE </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div id="loader"></div>
<?php
if (isset($_POST['STARTVISUREC']))
{
echo '<script>console.log("End loader spinner")</script>';
// making appearing the spinner before the call to remote server.
echo '<script language="javascript">';
echo 'document.getElementById("loader").style.display="inline"';
echo '</script>';
// calling remote APP in BE server.
$remotstarter = file_get_contents('http://192.168.56.154/WEBAPP/wa_start.php');
echo '<script>console.log("End loader spinner")</script>';
// making disappearing the spinner after the call to remote is finished.
echo '<script language="javascript">';
echo 'document.getElementById("loader").style.display="hidden"';
echo '</script>';
}
if (isset($_POST['STARTFACEREC']))
{
// calling local script for other usage.
shell_exec("sudo python AppPy/cgi-bin/test.py");
echo("Off");
}
?>
<form method="post">
<button name="STARTVISUREC">START VISU REC</button>
<button name="STARTFACEREC">START FACE REC</button><br><br>
</form>
<script>
</script>
</div>
</div>
<div style="margin-left:15%;padding:1px 16px;height:10px;">
</div>
</body>
</html>
仍不确定装载微调没有出现
注视fontawesome并添加/删除类“发发微调发旋”你的元素简单,干净的方式装载机添加的元素。 –
我想包含一个函数,并使用我在css中构建的微调器。 – MouIdri