o-rango / o-content-placeholder

o-content-placeholder Demo

Simple and customizable content placeholder built as web component with Stenciljs 🤘

Getting Started

Demo Version

To try this component:

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

// Add script tag to your page

<script src="./node_modules/@o-rango/o-content-placeholder/dist/o-content-placeholder.js"></script>
// OR
<script src="https://unpkg.com/@o-rango/o-content-placeholder/dist/o-content-placeholder.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>

Properties

//o-content-placeholder-block
@Prop() animate: boolean = false;
@Prop() lines: number = 1;
@Prop() lineHeight: number = 15;
@Prop() margin: number = 5;
@Prop() randomSize: boolean = false;
@Prop() rounded: boolean = false;

//o-content-placeholder-img
@Prop() animate: boolean = false;
@Prop() format: 'circle' | 'square' = 'square';
@Prop() size: number = 55;

o-content-placeholder's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency coveralls to v3.1.1
• chore(deps): update dependency semver to v5.7.2
• chore(deps): update jest monorepo (@types/jest, jest)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency semver to v7
• chore(deps): update dependency standard-version to v9
• chore(deps): update jest monorepo to v29 (major) (@types/jest, jest)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• @types/jest 23.1.4
• coveralls 3.0.2
• jest 23.5.0
• semver 5.5.0
• standard-version 4.4.0

travis

.travis.yml

• node 8

---

• Check this box to trigger a request for Renovate to run again on this repository

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Preset name not found within published preset config (monorepo:angularmaterial). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Fade in real content

Is it possible to fade out placeholder and show real content this way if being used on angular we dont have to use *ngIf. we can pass real text or image along with it.