Skeleton

About

Shows blanked grey text areas for unloaded text & image content

Alternatives

Accessibility

Requirements

Issues

Examples

Initial state

Loading state

Loaded state

Test
Body of skeleton item.

AngularJS

<div>
    <div>
        <div data-ng-if="State == STATES.Unloaded || State == STATES.Loaded && !Model.ThumbnailImageUrl">
            <span class="c-skeleton c-skeleton__img c-skeleton--sm"></span>
        </div>
        <div data-ng-if="State == STATES.Loading">
            <span class="c-skeleton c-skeleton__img c-skeleton--sm c-skeleton--loading"></span>
        </div>
        <div data-ng-if="State == STATES.Loaded && Model.ThumbnailImageUrl">
            <img data-ng-src="{{Model.ThumbnailImageUrl}}" alt="" />
        </div>
    </div>
    <div data-ng-if="State == STATES.Unloaded || State == STATES.Loaded && !Model">
        <span class="c-skeleton c-skeleton--lg"></span>
        <span class="c-skeleton c-skeleton--md"></span>
        <span class="c-skeleton c-skeleton--sm"></span>
    </div>
    <div data-ng-if="State == STATES.Loading">
        <span class="c-skeleton c-skeleton--lg c-skeleton--loading"></span>
        <span class="c-skeleton c-skeleton--md c-skeleton--loading"></span>
        <span class="c-skeleton c-skeleton--sm c-skeleton--loading"></span>
    </div>
    <div data-ng-if="State == STATES.Loaded && Model">
        <div>{{Model.Name}}</div>
        <div>&pound;{{Model.Price | number: 2}} each</div>
    </div>
</div>

JS - Parameters

References / inspiration