Browse Source

Added spinner animations for initial loading and infinite scroll

master
Jose Olarte III 2 years ago
parent
commit
a4301694ad
  1. 10
      project-list.html
  2. 8
      search.html

10
project-list.html

@ -45,8 +45,12 @@
<!-- New Project --> <!-- New Project -->
<a href="project-edit.html" class="fixed right-6 bottom-24 text-center text-4xl leading-none bg-blue-600 text-white w-14 py-2.5 rounded-full"><i class="fa-solid fa-plus fa-fw"></i></a> <a href="project-edit.html" class="fixed right-6 bottom-24 text-center text-4xl leading-none bg-blue-600 text-white w-14 py-2.5 rounded-full"><i class="fa-solid fa-plus fa-fw"></i></a>
<!-- Initial Loading Animation -->
<!-- SHOW ME only during load of first set of results -->
<p class="hidden text-slate-500 text-center italic mt-8 mb-4"><i class="fa-solid fa-spinner fa-spin-pulse"></i> Loading&hellip;</p>
<!-- Results List --> <!-- Results List -->
<ul class=""> <ul>
<li class="border-b border-slate-300"> <li class="border-b border-slate-300">
<a href="project-view.html" class="block py-4 flex gap-4"> <a href="project-view.html" class="block py-4 flex gap-4">
<div class="flex-none w-12"> <div class="flex-none w-12">
@ -86,6 +90,10 @@
</a> </a>
</li> </li>
</ul> </ul>
<!-- Infinite Scroll Loading Animation -->
<!-- SHOW ME only while loading more results into list -->
<p class="hidden text-slate-500 text-center italic mt-8 mb-4"><i class="fa-solid fa-spinner fa-spin-pulse"></i> Loading More&hellip;</p>
</section> </section>
</body> </body>

8
search.html

@ -63,6 +63,10 @@
</ul> </ul>
</div> </div>
<!-- Initial Loading Animation -->
<!-- SHOW ME only during load of first set of results -->
<p class="hidden text-slate-500 text-center italic mt-8 mb-4"><i class="fa-solid fa-spinner fa-spin-pulse"></i> Loading&hellip;</p>
<!-- Results List --> <!-- Results List -->
<ul class=""> <ul class="">
<li class="border-b border-slate-300"> <li class="border-b border-slate-300">
@ -104,6 +108,10 @@
</a> </a>
</li> </li>
</ul> </ul>
<!-- Infinite Scroll Loading Animation -->
<!-- SHOW ME only while loading more results into list -->
<p class="hidden text-slate-500 text-center italic mt-8 mb-4"><i class="fa-solid fa-spinner fa-spin-pulse"></i> Loading More&hellip;</p>
</section> </section>
</body> </body>

Loading…
Cancel
Save