Loading indication

This demo shows a recommender with loading indication to suggest to the user that a content is loading. Note that the recommender initialization is intentionally slowed down to demonstrate the loading indicator effect.

<div id="recommender">
    <div class="recommender-loading" id="lbx-recommender-homepage">
        <div class="spinner"></div>
    </div>
</div>

<link rel="dns-prefetch" href="//live.luigisbox.com">

<script>
function LBInitRecommender() {
  // Intentionally defer initialization to simulate slow loading of the script
  setTimeout(function() {
    Luigis.Recommend({
        TrackerId: '179075-204259',
        Theme: 'luigis',
        Size: 3,
        Name: 'top_products',
        Type: 'top_products'
    }, '#recommender')
  }, 2000);
}
</script>

<style>
#lbx-recommender-homepage {
  height: 200px;
}
.recommender-loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.spinner {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.spinner:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #000 transparent #000 transparent;
  animation: spinner 2.2s linear infinite;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

<script src="https://cdn.luigisbox.com/recco.js" async onload="LBInitRecommender()"></script>
Previous example
Basic example
Recommender examples

Try it out →
Next example
Carousel
Recommender examples

Try it out →