Academy of Natural Sciences

Filter Content Container 

<h2 id="js-filter-content-title" tabIndex="-1" class="u-sr-only"></h2>
<div id="js-filter-content" class="o-filter-content-container">
    <div class="o-filter-content-container__loader">
        <div class="o-filter-content-container__loader-icon"></div>
        <span class="u-sr-only">Loading...</span>
    </div>
    <div id="js-replace-content" class="o-filter-content-container__inner">

        <div class="o-filter-content-container__demo f-text--small">
            <p>This content and the button below are for demonstration purposes.</p>
            <p>Click button to show/hide loading effect.</p>
        </div>

    </div>
</div>

<button class="js-filter-demo o-btn o-btn--primary">Show Loader</button>
 
<h2 id="js-filter-content-title" tabIndex="-1" class="u-sr-only">{{ title }}</h2>
<div id="js-filter-content" class="o-filter-content-container">
  <div class="o-filter-content-container__loader">
    <div class="o-filter-content-container__loader-icon"></div>
    <span class="u-sr-only">Loading...</span>
  </div>
  <div id="js-replace-content" class="o-filter-content-container__inner">
    {% block filterContainerContent %}
      {% if isSample %}
        <div class="o-filter-content-container__demo f-text--small">
          <p>This content and the button below are for demonstration purposes.</p>
          <p>Click button to show/hide loading effect.</p>
        </div>
      {% endif %}
    {% endblock %}
  </div>
</div>
{% if isSample %}
  <button class="js-filter-demo o-btn o-btn--primary">Show Loader</button>
{% endif %}
 
{
  "pageColorTheme": "teal",
  "isSample": true
}
  • Content: 
    @keyframes loaderRing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.o-filter-content-container {
  position: relative;
}

.o-filter-content-container__inner {
  transition: all 0.3s ease-in-out;

  .is-loading & {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 2rem, 0);
  }
}

.o-filter-content-container__loader {
  visibility: hidden;
  opacity: 0;
  position: sticky;
  top: 40%;
  left: 0;
  width: 100%;
  transform: translate3d(0, 2rem, 0);
  transition: all 0.3s ease-in-out;

  .is-loading & {
    opacity: 1;
    visibility: visible;
  }
}

.o-filter-content-container__loader-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 8rem;
  height: 8rem;

  &:after {
    content: " ";
    display: block;
    width: 6.4rem;
    height: 6.4rem;
    margin: 0.8rem;
    border-radius: 50%;
    border: 0.6rem solid var(--ct-dark);
    border-color: var(--ct-dark) transparent var(--ct-dark) transparent;
    animation: loaderRing 1.2s linear infinite;
  }
}



.o-filter-content-container__demo {
  min-height: 80vh;
}
  • URL: /components/raw/filter-content-container/filter-content-container.scss
  • Filesystem Path: patterns\04-objects\filters\filter-content-container\filter-content-container.scss
  • Size: 1.2 KB

No notes defined.