UNPKG

@blueprintjs/core

Version:

Core styles & components

25 lines (16 loc) 973 B
@# Skeleton Skeletons provide a loading state that mimics the shape of your yet-to-load content. This "component" is a single constant `Classes.SKELETON` that, when applied to an element through `className`, will cover its content with a loading animation. The skeleton inherits the dimensions of whatever element the class is applied to, so you should supply a placeholder while awaiting real content. @css skeleton @## CSS Apply the class `.@ns-skeleton` to elements that you would like to cover up with a loading animation. <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign @ns-callout-has-body-content"> <h5 class="@ns-heading">Manually disable focusable elements</h5> When using the `.@ns-skeleton` class on focusable elements such as inputs and buttons, be sure to disable the element, via either the `disabled` or `tabindex="-1"` attributes. Failing to do so will allow these skeleton elements to be focused when they shouldn't be. </div>