# Placeholder > Placeholder is used to reserve space for content that will soon appear in a layout. Reserve space for loading content with placeholders. Use lines, headings, and image blocks to build skeleton screens. Source: https://docs.tabler.io/ui/components/placeholder --- ## Placeholder line Placeholder lines can contain lines of text. Their length is different and depends on the `col-` class. ```html
``` Use `col-12` for lines that will span the whole width: ```html
``` You can also move the lines to the right or center them: ```html
``` ## Placeholder heading A placeholder can also contain an element that looks like a header: ```html
``` ## Placeholder avatar You can use a placeholder that will look like an [avatar](/ui/components/avatar). You can use the `avatar` component, and get the image in the right proportions. ```html
``` The avatar size classes work here too: ```html
``` ## Placeholder image You can use a placeholder that will look like a picture. You can use the `ratio` component, and get the image in the right proportions. ```html
``` ## Placeholder color By default, the placeholder uses `currentColor`. This can be overridden with a custom color or utility class. Full color classes are available for background colors. ```html ``` ## Placeholder sizing The sizes of placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`. ```html ``` ## Animation Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded. ```html

``` ## Live examples See in the following examples how else you can use the placeholder component ```html
``` ## Accessibility - A placeholder is a picture of content that is not there yet. Hide it from screen readers with `aria-hidden="true"` and mark the container `aria-busy="true"`, so the reader waits for the real thing. - Announce the load from one live region, not from the placeholder itself. Otherwise every skeleton block is announced separately. - `placeholder-glow` and `placeholder-wave` animate continuously. Turn them off under `prefers-reduced-motion`. - Keep the layout of the placeholder close to the real content, so nothing jumps when it arrives.