GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → phuoc-ng → placeholders

phuoc-ng / placeholders

Licence: MIT license
SVG-based placeholders in web components

Programming Languages

typescript
32286 projects
HTML
75241 projects

Labels

svgplaceholderweb-componentsstenciljsstenciljs-components

Projects that are alternatives of or similar to placeholders

stencil-shimmer
StencilJS component for adding shimmer UI effect to your applications.
Stars: ✭ 14 (-50%)
Mutual labels:  web-components, stenciljs, stenciljs-components
pdf-viewer
PDF viewer web component built in StencilJS. Reusable in Angular, Ionic, React, Vue.JS, etc.
Stars: ✭ 65 (+132.14%)
Mutual labels:  stenciljs, stenciljs-components
Vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Stars: ✭ 1,928 (+6785.71%)
Mutual labels:  web-components, stenciljs
anywhere-webcomponents
A UI work in progress based on custom elements (web components) for use in anywhere.
Stars: ✭ 17 (-39.29%)
Mutual labels:  web-components, stenciljs
corejam
A scaffolding for building progressive GraphQL powered jamstack applications.
Stars: ✭ 24 (-14.29%)
Mutual labels:  web-components, stenciljs
Shadow-DOM-inject-styles
🎉 A helper function to easily modify Shadow DOM CSS.
Stars: ✭ 47 (+67.86%)
Mutual labels:  web-components, stenciljs
ionic-custom-components
🌈 Ionic Tutorial: Mastering Web Components in Ionic Framework. This repo is an Ionic project showcasing Angular custom components and Stencil custom web components.
Stars: ✭ 30 (+7.14%)
Mutual labels:  web-components, stenciljs
bulmil
💄 A agnostic UI components library based on Web Components, made with Bulma & Stencil.
Stars: ✭ 121 (+332.14%)
Mutual labels:  stenciljs, stenciljs-components
frosted-glass
❄️ Add a live frosted glass blur effect over any type of web content, including text.
Stars: ✭ 62 (+121.43%)
Mutual labels:  web-components, stenciljs
design-system
The Baloise Design System consists of reusable components and a clearly defined visual style, that can be assembled together to build any number of applications.
Stars: ✭ 40 (+42.86%)
Mutual labels:  web-components, stenciljs
vaadin-context-menu
The responsive Web Component for showing context dependent items for any element on the page. Part of the Vaadin components.
Stars: ✭ 26 (-7.14%)
Mutual labels:  web-components
web-share-wrapper
A web component that wraps other share elements to replace with a web share button where supported.
Stars: ✭ 18 (-35.71%)
Mutual labels:  web-components
promise
Common interface for simple asynchronous placeholders.
Stars: ✭ 66 (+135.71%)
Mutual labels:  placeholder
fundamental-tools
Web applications with ABAP, done simple.
Stars: ✭ 42 (+50%)
Mutual labels:  web-components
awesome-polymer
A collection of awesome Polymer resources.
Stars: ✭ 43 (+53.57%)
Mutual labels:  web-components
rocket
The modern web setup for static sites with a sprinkle of JavaScript
Stars: ✭ 169 (+503.57%)
Mutual labels:  web-components
typing-effect-element
A custom element that shows text as if it were being typed
Stars: ✭ 81 (+189.29%)
Mutual labels:  web-components
DevLorem
No more 'Lorem ipsum', get some real quotes or speeches for your free text with this generator!
Stars: ✭ 59 (+110.71%)
Mutual labels:  placeholder
toggle-icon
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Stars: ✭ 21 (-25%)
Mutual labels:  web-components
nuxt-stencil
Easy Stencil.js component library integration with Nuxt.js.
Stars: ✭ 16 (-42.86%)
Mutual labels:  stenciljs
View All Similar Projects ➔

Placeholder

Custom placeholders in web components. Can be used with popular JavaScript frameworks or HTML tags.

Usage

Insert the following script tag to your page:

<script type="module" src="https://unpkg.com/@placeholders/[email protected]/dist/esm/placeholders.js"></script>

Then you can use <placeholder-xxx> tags. For example:

Tag Output
<placeholder-image width="400" height="200"> Image placeholder
<placeholder-lines size="10"> Lines placeholder
<placeholder-text>Lorem ipsum dolor sit amet ...</placeholder-text> Text placeholder

Local development

  • Install the dependencies
$ npm install
  • Build for production
$ npm run build
  • Run locally
$ npm run dev

Open http://localhost:3333 in your browser to see it in action.

Contributing

PRs, suggestions are welcome!

About

This project is developed by Nguyen Huu Phuoc. I love building products and sharing knowledge.

Be my friend on

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].