rhm-search-results new loader

rhm-search-results new loader

by pj_js15

HTML

<div class="search-results">

<div class="inbenta-search-loader">
  <svg x="0px" y="0px" viewBox="0 0 150 150" class="inbenta-search-loader__load">
<circle cx="75" cy="75" r="60" class="inbenta-search-loader__load__inner"></circle>
</svg>
</div>

  <div class="res-item">
    <h3 class="itm-title">Safety Documents</h3>
    <div class="documents-list">
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="load-more">Load More ></span>
    </div>
  </div>

  <div class="res-item">
    <h3 class="itm-title">Technical Documents</h3>
    <div class="documents-list">
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="load-more">Load More ></span>
    </div>
  </div>

  <div class="res-item">
    <h3 class="itm-title">Price Lists</h3>
    <div class="documents-list">
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
      <span class="document"><a href="test.pdf">Name of Document</a></span>
  ...

CSS

.res-item {
  padding: 10px 0 25px 10px;
  position: relative;
}

.res-item .itm-title {
  margin: 0 0 10px 0;
  background: gray;
  position: sticky;
  top: 0;
}

.documents-list span.document {
  clear: both;
  display: none;
}

.documents-list .load-more {
  position: absolute;
  bottom: 10px;
  left: 200px;
  cursor: pointer;
}

.documents-list .load-more:hover {
  color: lightblue;
}

.documents-list,
.no-results {
  margin-left: 15px;
}

.res-item .documents-list a:before {
  content: "";
  display: block;
  background: url('https://khazon.net/drupal-855/themes/drupal8_zymphonies_theme/images/pdf.svg') no-repeat;
  width: 20px;
  height: 20px;
  float: left;
  background-size: contain;
  padding-right: 5px;
}



.inbenta-search-loader {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000
}

.inbenta-search-loader *,
.inbenta-search-loader:after,
.inbenta-search-loader:before {
  box-sizing: border-box
}

.inbenta-search-loader__load {
  width: 50px;
  -webkit-animation: 3s linear infinite loading;
  animation: 3s linear infinite loading
}
.inbenta-search-loader {
    background-color: rgba(255,255,255,.75)
}

@-webkit-keyframes loading {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes loading {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.inbenta-search-loader__load__inner {
    stroke-dashoffset: 0;
    stroke-dasharray: 300;
    stroke-width: 20;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke: #D52B1E;
    fill: transparent;
    -webkit-animation: 2s linear infinite loading-circle;
    animation: 2s linear infinite...

JavaScript

$(document).ready(function() {
  var loadMore = 3;

	//show loader
  setTimeout(function(){ 
  	$('.inbenta-search-loader').fadeOut(); 
  }, 2000);

  $('.search-results').find('.res-item').each(function(i, elem) {
    console.log(elem);
    console.log($(this).find('.document').size());
    var docNum = $(this).find('.document').size();

    var display = 2;

    $(this).find('.document:lt(' + display + ')').css('display', 'block');
  });


  $('.load-more').on('click', function() {
    var docNum = $(this).parent().find('.document').size();

    loadMore = (loadMore + 3 <= docNum) ? loadMore + 3 : docNum;
    console.log('docNum: ' + docNum + ' >>>> loadMore: ' + loadMore);

    $(this).parent().find('.document:lt(' + loadMore + ')').css('display', 'block');

    if (docNum === loadMore) {
      $(this).hide();
    }
  });

});