Placeholder Fillers - code sample

holderjs.com

theme: The theme to use for the placeholder. Example: holder.js/300x200?theme=sky
random: Use random theme. Example: holder.js/300x200?random=yes
bg: Background color. Example: holder.js/300x200?bg=2a2025
fg: Foreground (text) color. Example: holder.js/300x200?fg=ffffff
text: Custom text. Example: holder.js/300x200?text=Hello
size: Custom text size. Defaults to pt units. Example: holder.js/300x200?size=50
font: Custom text font. Example: holder.js/300x200?font=Helvetica
align: Custom text alignment (left, right). Example: holder.js/300x200?align=left
outline: Draw outline and diagonals for placeholder. Example: holder.js/300x200?outline=yes
lineWrap: Maximum line length to image width ratio. Example: holder.js/300x200?lineWrap=0.5
There are 6 default themes: sky, vine, lava, gray, industrial, and social.

Plain placeholder

Themed placeholder

Placeholder with random theme

Placeholder with rgb color values

Placeholder with rgba color values

Placeholder with text

Placeholder with lengthy text

Canvas placeholder with lengthy text

Placeholder with very lengthy text

Placeholder with custom newline

Placeholder with disabled line wrap

Placeholder with left-aligned text

Placeholder with right-aligned text

Placeholder with right-aligned text and custom margin

Placeholder with (randomly) missing image source

Auto-sized placeholder

Auto-sized placeholder in exact mode

<div> with background placeholder

<div> with data-background-src placeholder

Placeholder added using addImage with a selector

Auto-sized canvas placeholder with custom domain and theme

Placeholder using Pacifico font

object placeholder using Pacifico font

Placeholders demonstrating adaptive text size

Placeholder with custom font size

SVG and canvas placeholders with outline enabled

Placeholders with automatic foreground color

Placeholders with automatic and default color

Placeholders with automatic foreground color, grayscale

Placeholder added using addImage with a DOM node

Placeholder that triggers an error due to an invalid bg color

Full-page fluid placeholder

Full-page fluid object placeholder

Full-page fluid placeholder in literal mode

Full-page fluid placeholder with embedded dimension text

Full-page fluid placeholder that toggles resizable updates when clicked

Fluid placeholder inside invisible parent element.

Full-page fluid placeholder with outline enabled

blank

blank

blank

blank

blank