Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdheshnayak/pulsable
A simple and customizable JavaScript library to add a pulsing/skeleton loading effect to your specific html section.
https://github.com/abdheshnayak/pulsable
Last synced: 21 days ago
JSON representation
A simple and customizable JavaScript library to add a pulsing/skeleton loading effect to your specific html section.
- Host: GitHub
- URL: https://github.com/abdheshnayak/pulsable
- Owner: abdheshnayak
- License: mit
- Created: 2023-11-09T12:46:17.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-13T06:00:58.000Z (about 2 months ago)
- Last Synced: 2024-12-13T07:17:30.337Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/pulsable
- Size: 826 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Pulsable
A simple and customizable JavaScript library to add a pulsing/skeleton loading effect to your specific html section.
**[Code Sandbox Link](https://codesandbox.io/s/pulsable-kyzztl?file=/src/App.js)**
### Importing
```js
const setPulsing = require("pulsable");
or
import setPulsing from "pulsable";
// css path: "pulsable/index.css"
```
### using CDN
[CDN Link](https://www.jsdelivr.com/package/npm/pulsable)
### css with CDN
```html
```
### How to design your element block
```jsx
Name:
Email:
Submit
```
### How to trigger effect and stop it
```js
const yourContainerElement = document.getElementById("your-container-element");
setPulsing({
rootElement: yourContainerElement,
config: {
animation: "wave",
bgColors: {
light: "#f2f2f2",
medium: "#e6e6e6",
},
noRadius: false,
noPadding: false,
},
loading: true,
});
```
## Usage Guide
The method `setPulsing` takes an object with the following properties:
- `rootElement`: the element that contains the section you want to add the pulsing effect to.
- `loading`: a boolean that indicates whether the pulsing effect should be shown or not.
- `config`: an object that contains the configuration for the pulsing effect. It has four properties:
- `animation`: the animation type of the pulsing effect. It can be one of the following:
- `wave`: the default animation type. It's a wave that moves from left to right.
- `wave-reverse`: a wave that moves from right to left.
- `pulse`: a pulse animation that moves from left to right.
- `none`: no animation.
- `bgColors`: an object that contains the background colors for the pulsing effect. It has two properties:
- `light`: the light color of the background.
- `medium`: the medium color of the background.
- `noRadius`: a boolean that indicates whether the pulsing effect should have rounded corners or not. By default it has rounded corners.
- `noPadding`: a boolean that indicates whether the pulsing effect should have padding in each skeleton items or not. By default it has padding.
> check [example](https://codesandbox.io/s/pulsable-kyzztl?file=/src/App.js) for more.
### Conditions:
- You must provide a rootElement to the `setPulsing` method.
- You must provide loading property to the `setPulsing` method.
- You can use the `className="pulsable"` to add the pulsing effect to any element.
- if your element is a self closing tag like `![]()
` you should have to wrap it with div and add `pulsable` class to that.
- if you want to hide some element while loading add class name `pulsable-hidden`
- if you want to add image icon in skeleton add class name `pulsable-img`
- for the paragraph use classname `pulsable-para`
- while applying base config to all elements, you may need some exceptions. for that you can use `pulsable-no-radius`, `pulsable-no-padding`, `pulsable-radius` and `pulsable-padding`. by using these classes you can override some specific elements.
- As Shown in example, for better performance you can use `flex` and `align-items: flex-start` in parentNode to avoid the pulsing effect from stretching the element. you can also add these styles conditionally wihile loading, if it's affecting your design.
## React Support
for the react use library [react-pulsable](https://www.npmjs.com/package/react-pulsable)read