app.html

<style>
  #sm-similar-products-title{
    text-align: center;
    margin-bottom: 1rem;
  }
  .loader {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #555;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    margin-left: 40%;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

<h1 id="sm-similar-products-title">Similar Products</h1>
<div id="sm-similar-products-loader" class="loader"></div>
<div id="sm-similar-products-app">
  <div id="sm-similar-products" class="container-fluid">
    <div id="sm-similar-products-carousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner row w-80 mx-auto">
          <div
            :class="[index === 0 ? 'carousel-item col-md-4 active' : 'carousel-item col-md-4']"
            v-if="similarProducts"
            :key="index"
            v-for="(item, index) in similarProducts">
            <a :href="item.metadata.source" rel="noopener noreferrer" target="_blank">
              <div class="card">
                <img class="card-img-top img-fluid" :src="item.mediaUrl" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text">{{item.metadata.caption}}</p>
                  <p class="card-text">${{item.price}}</p>
                </div>
              </div>
            </a>
        </div>
      </div>
      <a class="carousel-control-prev" href="#sm-similar-products-carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#sm-similar-products-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>
  <script>
    document.getElementById("sm-similar-products-app").style.display = "none";
    setTimeout(function(){ 
      document.getElementById("sm-similar-products-app").style.display = "";
      document.getElementById("sm-similar-products-loader").style.display = "none";
     }, 3000);
  </script>
  <script src=https://cdn.jsdelivr.net/npm/vue></script>
  <script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js integrity=sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q
    crossorigin=anonymous></script>
  <script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js integrity=sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl
    crossorigin=anonymous></script>
  <script type="text/javascript" src="https://rawgit.com/JimmyLin39/55f8286654650a6647d22d697c75a769/raw/d92bddf3d90fc6637a3533a1a35b27da46884c88/bundle.js"></script>