Component Loader

v0.0.0

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

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

<div class="vi-grid">
  <div class="vi-grid__row vi-grid__row--grid-30">
    <div class="col-md-4">
      <div style="height: 80px">
        <!-- Component Loader (mods: --loader) -->
        <div class="vi-component-loader vi-pattern vi-pattern--neutral-lines vi-component-loader--loader">
          <div class="vi-component-loader__inner">
            <div class="vi-component-loader__wrap">
              <div aria-hidden="true" class="vi-component-loader__circle">
              </div>
              <div class="vi-component-loader__content">
                <div class="vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
                  <p>Loading</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div style="height: 150px">
        <!-- Component Loader (mods: --loader) -->
        <div class="vi-component-loader vi-pattern vi-pattern--neutral-lines vi-component-loader--loader">
          <div class="vi-component-loader__inner">
            <div class="vi-component-loader__wrap">
              <div aria-hidden="true" class="vi-component-loader__circle">
              </div>
              <div class="vi-component-loader__content">
                <div class="vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
                  <p>Loading</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div style="height: 322px">
        <!-- Component Loader (mods: --loader) -->
        <div class="vi-component-loader vi-pattern vi-pattern--neutral-lines vi-component-loader--loader">
          <div class="vi-component-loader__inner">
            <div class="vi-component-loader__wrap">
              <div aria-hidden="true" class="vi-component-loader__circle">
              </div>
              <div class="vi-component-loader__content">
                <div class="vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
                  <p>Loading</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Progress #

This is a (fake) progress indicator, designed to fill large components or (most of) the page.

Please mind that the markup is different from the default variant.

The buttons are for demo purposes only.

<div class="vi-grid">
  <div class="vi-grid__row vi-grid__row--grid-30">
    <div class="col-md-4">
      <div style="height: 80px">
        <!-- Component Loader (mods: --progress) -->
        <div class="vi-component-loader vi-pattern vi-pattern--neutral-lines vi-component-loader--progress" id="sg-662735">
          <div class="vi-component-loader__inner">
            <div class="vi-component-loader__wrap">
              <div aria-hidden="true" class="vi-component-loader__circle">
                <svg class="vi-component-loader__svg" viewbox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
                  <circle class="vi-component-loader__line vi-component-loader__line--bg" cx="55" cy="55" r="50" vector-effect="non-scaling-stroke"></circle>
                  <circle class="vi-component-loader__line vi-component-loader__line--fg" cx="55" cy="55" r="50" vector-effect="non-scaling-stroke"></circle>
                </svg>
              </div>
              <div class="vi-component-loader__content">
                <div class="vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
                  <p>Loading</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Button type: solid  -->
      <button data-target="sg-662735" type="button" class="mt-10 vi-btn-solid vi-btn-solid--no-pointer vi-btn">Finish</button>
    </div>
    <div class="col-md-4">
      <div style="height: 150px">
        <!-- Component Loader (mods: --progress) -->
        <div class="vi-component-loader vi-pattern vi-pattern--neutral-lines vi-component-loader--progress" id="sg-49102e">
          <div class="vi-component-loader__inner">
            <div class="vi-component-loader__wrap">
              <div aria-hidden="true" class="vi-component-loader__circle">
                <svg class="vi-component-loader__svg" viewbox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
                  <circle class="vi-component-loader__line vi-component-loader__line--bg" cx="55" cy="55" r="50" vector-effect="non-scaling-stroke"></circle>
                  <circle class="vi-component-loader__line vi-component-loader__line--fg" cx="55" cy="55" r="50" vector-effect="non-scaling-stroke"></circle>
                </svg>
              </div>
              <div class="vi-component-loader__content">
                <div class="vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
                  <p>Loading</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Button type: solid  -->
      <button data-target="sg-49102e" type="button" class="mt-10 vi-btn-solid vi-btn-solid--no-pointer vi-btn">Finish</button>
    </div>
    <div class="col-md-4">
      <div style="height: 322px">
        <!-- Component Loader (mods: --progress) -->
        <div class="vi-component-loader vi-pattern vi-pattern--neutral-lines vi-component-loader--progress" id="sg-60ca6e">
          <div class="vi-component-loader__inner">
            <div class="vi-component-loader__wrap">
              <div aria-hidden="true" class="vi-component-loader__circle">
                <svg class="vi-component-loader__svg" viewbox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
                  <circle class="vi-component-loader__line vi-component-loader__line--bg" cx="55" cy="55" r="50" vector-effect="non-scaling-stroke"></circle>
                  <circle class="vi-component-loader__line vi-component-loader__line--fg" cx="55" cy="55" r="50" vector-effect="non-scaling-stroke"></circle>
                </svg>
              </div>
              <div class="vi-component-loader__content">
                <div class="vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
                  <p>Loading</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Button type: solid  -->
      <button data-target="sg-60ca6e" type="button" class="mt-10 vi-btn-solid vi-btn-solid--no-pointer vi-btn">Finish</button>
    </div>
    <div class="col">
      <div style="height: 600px">
        <!-- Component Loader (mods: --progress) -->
        <div class="vi-component-loader vi-pattern vi-pattern--neutral-lines vi-component-loader--progress" id="sg-5562db">
          <div class="vi-component-loader__inner">
            <div class="vi-component-loader__wrap">
              <div aria-hidden="true" class="vi-component-loader__circle">
                <svg class="vi-component-loader__svg" viewbox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
                  <circle class="vi-component-loader__line vi-component-loader__line--bg" cx="55" cy="55" r="50" vector-effect="non-scaling-stroke"></circle>
                  <circle class="vi-component-loader__line vi-component-loader__line--fg" cx="55" cy="55" r="50" vector-effect="non-scaling-stroke"></circle>
                </svg>
              </div>
              <div class="vi-component-loader__content">
                <div class="vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
                  <p>Loading</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Button type: solid  -->
      <button data-target="sg-5562db" type="button" class="mt-10 vi-btn-solid vi-btn-solid--no-pointer vi-btn">Finish</button>
    </div>
  </div>
</div>

When the progress variant is used, the component loader can be removed by calling the remove method on the component loader element.

$('component-loader-selector').viComponentLoader('remove');

Following is an example of how to remove the component loader by clicking a button (using jQuery).

When a button is clicked:

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

<script>
  $(function() {
    $(document).on('click', '[data-target]', function(e) {
      $('#' + $(this).data('target')).viComponentLoader('remove')
    });

    $('.vi-component-loader').on('vi-component-loader:removing', function(e) {
      alert('Component loader about to be removed')
    });
  })
</script>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascript is required to display this component.

Download Component Loader JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Added

  Initial draft