Loading Indicator

Basic full loading indicator. The indicator will take up the space of its defined containment area.

Click to show loading indication.

Here is some text in the loading containment area.

HTML

<div class="t-content">
    <div class="c-button" ng-click="isLoading = !isLoading;">Click to show loading indication.</div>
    <div class="c-loadingIndicator-containment"
        ng-init="isLoading = false;"
        style="height: 500px; width: 500px; border: 1px solid black;">
        <div class="u-m++ u-p++ u-beta">Here is some text in the loading containment area.</div>
        <inv-loading-indicator is-loading="isLoading"></inv-loading-indicator>
    </div>
</div>

Resizing Loading Indicator

The loading indicator can be made smaller or larger via ancestor element font-size, or by the 'size' parameter.

Click to show small loading indication.

Here is some text in the loading containment area.

Click to show small loading indication.

Here is some text in the loading containment area.

Click to show small loading indication.

Here is some text in the loading containment area.

HTML

<div class="t-content">
    <div class="c-button" ng-click="isLoadingResized = !isLoadingResized;">Click to show small loading indication.</div>
    <div class="c-loadingIndicator-containment"
        ng-init="isLoadingResized = false;"
        style="height: 200px; width: 200px; border: 1px solid black;">
        <div class="u-m+ u-p+">Here is some text in the loading containment area.</div>
        <div style="font-size: 8px">
            <inv-loading-indicator is-loading="isLoadingResized"></inv-loading-indicator>
        </div>
    </div>
    <br>
    <div class="c-button" ng-click="isLoadingResized = !isLoadingResized;">Click to show small loading indication.</div>
    <div class="c-loadingIndicator-containment"
        ng-init="isLoadingResized = false;"
        style="height: 200px; width: 200px; border: 1px solid black;">
        <div class="u-m+ u-p+">Here is some text in the loading containment area.</div>
        <div>
            <inv-loading-indicator
                is-loading="isLoadingResized"
                size="small"></inv-loading-indicator>
        </div>
    </div>
    <br>
    <div class="c-button" ng-click="isLoadingResized = !isLoadingResized;">Click to show small loading indication.</div>
    <div class="c-loadingIndicator-containment"
        ng-init="isLoadingResized = false;"
        style="height: 200px; width: 200px; border: 1px solid black;">
        <div class="u-m+ u-p+">Here is some text in the loading containment area.</div>
        <div>
            <inv-loading-indicator
                is-loading="isLoadingResized"
                size="large"></inv-loading-indicator>
        </div>
    </div>
</div>

Horizontal Loading Indicator

A horizontal variation for containment areas that have substantially more width than height.

Click to show loading indication.

Here is some text in the loading containment area.

HTML

<div class="t-content">
    <div class="c-button" ng-click="isLoadingHorizontal = !isLoadingHorizontal;">Click to show loading indication.</div>
    <div class="c-loadingIndicator-containment"
        ng-init="isLoadingHorizontal = false;"
        style="height: 100px; width: 500px; border: 1px solid black;">
        <div class="u-m++ u-p++ u-beta">Here is some text in the loading containment area.</div>
        <inv-loading-indicator is-loading="isLoadingHorizontal" variation="horizontal"></inv-loading-indicator>
    </div>
</div>

Vertical Loading Indicator

A vertical variation for containment areas that have substantially more height than width.

Click to show loading indication.

Here is some text in the loading containment area.

HTML

<div class="t-content">
    <div class="c-button" ng-click="isLoadingVertical = !isLoadingVertical;">Click to show loading indication.</div>
    <div class="c-loadingIndicator-containment"
        ng-init="isLoadingVertical = false;"
        style="height: 500px; width: 150px; border: 1px solid black;">
        <div class="u-m++ u-p++ u-beta">Here is some text in the loading containment area.</div>
        <inv-loading-indicator is-loading="isLoadingVertical" variation="vertical"></inv-loading-indicator>
    </div>
</div>

Page Loading Indicator

A vertical variation for containment areas that have substantially more height than width.

Click to show page load indicator for a few seconds.

HTML

<div ng-controller="pageLoadingExampleController">
    <inv-page-loading-indicator is-loading="isLoading"></inv-page-loading-indicator>
    <div class="c-button" ng-click="showFakePageLoad();">Click to show page load indicator for a few seconds.</div>
</div>

Datatable Loading Indicator

Showing loading with a datatable.

Click to show datatable loading indication.

HTML

<div ng-controller="datatableExampleController" class="t-content">
    <div class="c-button" ng-click="isLoadingDatatable = !isLoadingDatatable;">Click to show datatable loading indication.</div>
    <div class="c-loadingIndicator-containment">
        <inv-loading-indicator is-loading="isLoadingDatatable"></inv-loading-indicator>
        <div class="s-datatable c-datatable"
            ng-init="isLoadingDatatable = false;"
            ui-grid-resize-columns
            ui-grid="{ data: datatable.tableData,
                onRegisterApi: datatable.init,
                columnDefs: datatable.columnsWithDefaultSizing }"></div>
    </div>
</div>

Message with Indicator

Showing a loading indicator along with a loading message.

Click to show loading indication with a message.

Here is some text in the loading containment area.

HTML

<div class="t-content">
    <div class="c-button" ng-click="isLoadingwMessage = !isLoadingwMessage;">Click to show loading indication with a message.</div>
    <div class="c-loadingIndicator-containment"
        ng-init="isLoadingwMessage = false;"
        style="height: 500px; width: 500px; border: 1px solid black;">
        <div class="u-m++ u-p++ u-beta">Here is some text in the loading containment area.</div>
        <inv-loading-indicator
            is-loading="isLoadingwMessage"
            message="Loading"></inv-loading-indicator>
    </div>
</div>