Is it better to update the checklist status by making individual ajax calls for each checklist item or by making one call and updating it once completed?
I have included a template showing how it currently looks and what I am aiming for.
Unfortunately, I tried to upload the CSS image files but was unsuccessful in doing so.
This is the current appearance:
https://i.sstatic.net/TkAh5.jpg
Thanks in advance.
div {
width: 30%;
top: 50%;
left: 50%;
border: 1px solid black;
}
ul {
list-style: none;
width: 30%;
}
li {
padding-top: 20px;
}
img {
float: right;
display: inline;
text-align: middle;
transition: all .2s ease;
}
.pass {
background: url('status1.png') no-repeat -2px -47px;
width: 20px;
height: 20px;
}
.fail {
background: url('status1.png') no-repeat -2px -70px;
width: 20px;
height: 20px;
}
.inprog {
background: url('status1.png') no-repeat -2px -25px;
width: 20px;
height: 20px;
}
.pend {
background: url('status1.png') no-repeat -2px -3px;
width: 20px;
height: 20px;
}<div>
<h4> Please Wait...... Performing checks on</h4>
<ul>
<li> check1 <img src="img_trans.gif" class="pass" /></li>
<li> check2 <img src="img_trans.gif" class="fail" /></li>
<li> check3 <img src="img_trans.gif" class="inprog" /></li>
<li> check4 <img src="img_trans.gif" class="pend" /></li>
</ul>
</div>`