我怎么会通过项目数据库中的循环时显示的视觉反馈？

Question

我在做一个项目分拣系统中，用户会点击一个按钮，它会从数据库中检索项目被采摘。一旦采摘，用户会点击该按钮，它会进入到下一个项目在表中。我想为用户点击通过每次展现一种视觉显示或反馈。

说有10项需要被挑我不得不要么每次直到完成甚至像一个文本指示器，例如1 // 10，2/10等增加一个进度条

作为参考，我会包括我的相关代码

这里是JS

<script >
var offset = 0;
$(document).ready(function() {
$('#button1').click(function(e) {
    $("#div1").empty();
    // pass offset value with GET request
    $.getJSON("getItem.php?offset=" + offset, function(result) {

    offset++; // increment the value after sucessful AJAX call
    $.each(result, function(i, field) {
        $("#div1").empty();
        $("#div1").append(JSON.stringify(result)); //alert(JSON.stringify(data));
    });
});
});
}); 
</script>

和我的PHP

mysqli_select_db($con,"orders");
$rows = null;
// Get the offset value
$offset = empty($_GET['offset']) ? 0 : $_GET['offset'];

$sql="SELECT * FROM orders Limit $offset, 1 "; // pass the offset value to LIMIT query

$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_assoc($result))
$rows[] = array_map('utf8_encode', $row);

echo json_encode($rows);

我做了一些谷歌搜索，但没有找到相关的我的想法任何例子，如果有人知道如何或可能指向我相似的问题的解决方案，将不胜感激

Answer 1

我不是100％肯定它是什么你是后，但如果你想要一个简单的加载动画你也许可以做到这一点与CSS，JS和HTML的组合。创建DIV，并给它一个类名或ID。 e.g装载装载CSS看起来是这样的：

.loading{
  z-index: 10;
  width: 100%;
  height: 100vh;
  background-color: rgb(255,255,255); /*What ever color you want*/
  position: absolute;
  top: 0;
  left: 0;
}

我不知道你想显示在加载下一个结果，这样的灵感，具有加载动画上codePen看什么。 E.g https://codepen.io/Manoz/pen/pydxK

在CSS中，创建一个名为displayNone类。 CSS的看起来像

.displayNone{
  display:none;
}

然后用JS加/取决于如果您有结果或不删除displayNone到装载类。你甚至可以只创建一个@keyframes动画。方式很多。 https://spangle.com.au