(no summary available)

Built With Stencil Coverage Status Build Status

o-content-placeholder Demo

Simple and customizable content placeholder built as web component with Stenciljs :metal:

Getting Started

To try this component:

npm i --save @o-rango/o-content-placeholder

// Add script tag to your page

<script src="./node_modules/@o-rango/orango-demo-tools/dist/o-content-placeholder.js.js"></script>
// OR
<script src="https://unpkg.com/@o-rango/orango-demo-tools/dist/o-content-placeholder.js.js"></script>

And compose your content placeholder with <o-content-placeholder-img> or </o-content-placeholder-block>

  <o-content-placeholder-img size="55" animate="true" format="square"></o-content-placeholder-img>
  <o-content-placeholder-block rounded="true" line-height="15" margin="6" animate="true" lines="3"></o-content-placeholder-block>
  <o-content-placeholder-img size="55" animate="false" format="circle"></o-content-placeholder-img>


@Prop() animate: boolean = false;
@Prop() lines: number = 1;
@Prop() lineHeight: number = 15;
@Prop() margin: number = 5;
@Prop() randomSize: boolean = false;
@Prop() rounded: boolean = false;

@Prop() animate: boolean = false;
@Prop() format: 'circle' | 'square' = 'square';
@Prop() size: number = 55;

Demo Version


Link to this version
ImportedReleased 25 June 2018MIT License
Framework Support
Browser Independent
Install with
npm install @o-rango/o-content-placeholder"@0.1.5"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.1.5