@conectate/ct-loading-placeholder

Is a simple element to use skeleton loading such as Facebook.

Usage no npm install needed!

<script type="module">
  import conectateCtLoadingPlaceholder from 'https://cdn.skypack.dev/@conectate/ct-loading-placeholder';
</script>

README

Published on webcomponents.org NPM GitHub version Known Vulnerabilities

ct-loading-placeholder

ct-loading-placeholder is a simple element to use skeleton loading such as Facebook.

Installation

To include this, type:

$ yarn add @conectate/ct-loading-placeholder

or

$ npm i @conectate/ct-loading-placeholder

Usage

Import lib

import '@conectate/ct-loading-placeholder/ct-loading-placeholder';

Use in your HTML

<ct-loading-placeholder style="height:24px;width:100px;border-radius: 16px;"></ct-loading-placeholder>

Styling

Custom property Description Default
--loading-placeholder-color-1 Primary color for animation #E0E0E0
--loading-placeholder-color-2 Secondary color for animation #C0C0C0

Demo

Demo

Follow me

Herberth Obregón

https://twitter.com/herberthobregon

https://www.conectate.today/herberthobregon

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

History

  • v0.2.1 CHANGE keys to gruops in custom regex
  • v0.2.0 ADD href method
  • v0.1.8 You can use a html`` or string to define template
  • v0.1.0 Initial Release

License

See LICENSE