Page Loader

v0.0.0

The Page Loader Component is a visual indicator that shows content is being loaded or processed, providing feedback and improving user experience.

The Page Loader will be 100% of the height (and width) of it's container.

When navigating to another page and the platform allows it, the fake progress indicator animates to 100%.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus, debitis excepturi qui est

<div style="height: 800px">
  <!-- Page Loader  -->
  <div class="vi-page-loader vi-pattern vi-pattern--neutral-lines">
    <div class="vi-page-loader__inner">
      <div class="vi-page-loader__wrap vi-page-loader__wrap--main">
        <div class="vi-page-loader__circle vi-page-loader__circle--main">
          <div class="vi-page-loader__circle vi-page-loader__content">
            <div class="vi-typesystem vi-typesystem--collapse-last">
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus, debitis excepturi qui est</p>
            </div>
          </div>
          <svg class="vi-page-loader__svg" viewbox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
            <circle class="vi-page-loader__line vi-page-loader__line--bg" cx="55" cy="55" r="52" vector-effect="non-scaling-stroke"></circle>
            <circle class="vi-page-loader__line vi-page-loader__line--fg" cx="55" cy="55" r="52" vector-effect="non-scaling-stroke"></circle>
          </svg>
        </div>
      </div>
      <div aria-hidden="true" class="vi-page-loader__wrap vi-page-loader__wrap--animated vi-page-loader__wrap--1">
        <div class="vi-page-loader__circle vi-page-loader__circle--1"></div>
      </div>
      <div aria-hidden="true" class="vi-page-loader__wrap vi-page-loader__wrap--animated vi-page-loader__wrap--2">
        <div class="vi-page-loader__circle vi-page-loader__circle--2"></div>
      </div>
      <div aria-hidden="true" class="vi-page-loader__wrap vi-page-loader__wrap--animated vi-page-loader__wrap--3">
        <div class="vi-page-loader__circle vi-page-loader__circle--3"></div>
      </div>
      <div aria-hidden="true" class="vi-page-loader__wrap vi-page-loader__wrap--animated vi-page-loader__wrap--4">
        <div class="vi-page-loader__circle vi-page-loader__circle--4"></div>
      </div>
    </div>
  </div>
</div>

…

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus, debitis excepturi qui est

<div style="height: 800px">
  <!-- Page Loader  -->
  <div class="vi-page-loader vi-pattern vi-pattern--neutral-lines">
    <div class="vi-page-loader__inner">
      <div class="vi-page-loader__wrap vi-page-loader__wrap--main">
        <div class="vi-page-loader__circle vi-page-loader__circle--main">
          <div class="vi-page-loader__circle vi-page-loader__content">
            <img src="/assets/images/logos/logo_teva.svg" width="100" height="36" class="mb-20" alt="">
            <div class="vi-typesystem vi-typesystem--collapse-last">
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus, debitis excepturi qui est</p>
            </div>
          </div>
          <svg class="vi-page-loader__svg" viewbox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
            <circle class="vi-page-loader__line vi-page-loader__line--bg" cx="55" cy="55" r="52" vector-effect="non-scaling-stroke"></circle>
            <circle class="vi-page-loader__line vi-page-loader__line--fg" cx="55" cy="55" r="52" vector-effect="non-scaling-stroke"></circle>
          </svg>
        </div>
      </div>
      <div aria-hidden="true" class="vi-page-loader__wrap vi-page-loader__wrap--animated vi-page-loader__wrap--1">
        <div class="vi-page-loader__circle vi-page-loader__circle--1"></div>
      </div>
      <div aria-hidden="true" class="vi-page-loader__wrap vi-page-loader__wrap--animated vi-page-loader__wrap--2">
        <div class="vi-page-loader__circle vi-page-loader__circle--2"></div>
      </div>
      <div aria-hidden="true" class="vi-page-loader__wrap vi-page-loader__wrap--animated vi-page-loader__wrap--3">
        <div class="vi-page-loader__circle vi-page-loader__circle--3"></div>
      </div>
      <div aria-hidden="true" class="vi-page-loader__wrap vi-page-loader__wrap--animated vi-page-loader__wrap--4">
        <div class="vi-page-loader__circle vi-page-loader__circle--4"></div>
      </div>
    </div>
  </div>
</div>

The Page Loader can be removed by calling the remove method on the component loader element.

$('page-loader-selector').viPageLoader('remove');

When called:

the progress goes to 100%.
the vi-page-loader:removing event is triggered.
the page loader is removed from the DOM.

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is required to display this component.

Download Page Loader JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Changed

  19 Jul 2023 - Enlarged min height
  21 Jun 2023 - Added fake progression.
  19 Jun 2023 - Some a11y improvements.
  19 Jun 2023 - Revised page loader.


Added

  Initial draft