Placeholder UI
A simple fast free user interface placeholder-ui plugin.
Placeholder UI is a Image
or Video
placeholder user interface plugin. Placeholder UI is one-dependency module placeholder-ui
dependent on Snizzle
CSS selector Javascript engine. Placeholder UI that set default placeholder of all elements image/video
of empty src. Placehlder UI in multiple features available like background, text color, cutom text, size preview and more.
⬇️ Install npm
npm install placeholder-ui --save
Including Placeholder UI
Below are some of the most common ways to include placeholder-ui.
Browser
Script tag
<script src="https://cdn.jsdelivr.net/npm/snizzle/dist/snizzle-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/placeholder-ui/plugin/placeholder-ui-min.js"></script>
📖 Documentation
Public API
placeholder(Object options)
Parameters
options: A placeholder Object {}
📚 Examples
HTML code
<img src="" alt="" data-sizes="200x300">
<video src="" data-text="Example Text"></video>
Javascript code
placeholder.set({
background: "#677cbb",
color: "#fff",
sizePreview: true,
fontFamily: "Arial",
fontSize: 20,
fontWeight: 900,
fontStyle: "normal"
});
🚀 CDN Links
🌐 Browsers support
Desktop
- Chrome 16+
- Edge 12+
- Firefox 3.6+
- Internet Explorer 7+1
- Opera 11.6+
- Safari 4.0+
1Workarounds for Internet Explorer 6 are still in the code but the browser is no longer actively tested.
Mobile
To report a bug in any of these browsers, please add an issue with a test case from jsfiddle or jsbin.
Usage
HTML Code
<img src="" alt="Placeholder UI" data-sizes="222x333">
Javascript Code
placeholder.set({
sizePreview: true,
fontFamily: "monospace"
});
Preview:
Javascript Code
placeholder.set({
background: "dark",
sizePreview: true,
color: "#ddd",
fontFamily: "monospace"
});
Preview:
Javascript Code
placeholder.set({
background: "#677cbb",
color: "#fff",
sizePreview: true,
fontFamily: "Arial",
fontSize: 20,
fontWeight: 900,
fontStyle: "normal"
});
Preview:
HTML Code
<video src="" data-text="Shahzada Modassir\nVideo frame">
Javascript Code
placeholder.set({
background: "#555555",
fontWeight: 900,
fontSize: 20,
color: "#eeeeee",
fontStyle: "italic"
});
Preview: