A lightweight pure JS library for customizable skeleton loading animations
npm install skeletonyhtml
`
$3
Download the library from the dist folder and include it in your HTML:
`html
`
$3
`bash
npm install skeletony
`
Basic Usage
1. Add the skeleton class to your images or elements:
`html
`
2. Initialize Skeletony:
`javascript
// Initialize with default settings
skeletony.init();
`
That's it! Your elements will now show a skeleton loading animation until they're fully loaded.
Advanced Usage
$3
`javascript
// Set fade transition to 0.8 seconds
skeletony.fade(0.8);
// Set wave animation to 3 seconds
skeletony.wave(3);
// Chain methods together
skeletony.fade(0.5).wave(2.5);
`
$3
`javascript
// Change gradient colors
skeletony.colors('#f0f0f0', '#e0e0e0');
// Change border radius
skeletony.radius('10px');
`
$3
`javascript
// Target elements with a different class
skeletony.select('.my-loading-placeholder');
// Or specify during initialization
skeletony.init({
selector: '.card-skeleton, .avatar-skeleton'
});
`
$3
`javascript
// Create a standalone skeleton element
const skeleton = skeletony.create({
width: '300px',
height: '200px',
aspectRatio: '16/9'
});
// Add it to the DOM
document.querySelector('.container').appendChild(skeleton);
`
$3
`javascript
skeletony.init({
// Animation timing (in seconds)
fadeTime: 0.5,
waveTime: 2.5,
// Colors
lightColor: '#f0f0f0',
darkColor: '#e0e0e0',
// Styling
borderRadius: '8px',
// Targeting
selector: '.skeleton',
// Other options
removeDelay: 300 // ms to remove skeleton after loading
});
`
API Reference
$3
- init(options): Initialize with custom options
`javascript
skeletony.init({
fadeTime: 0.5,
waveTime: 2,
lightColor: '#f0f0f0',
darkColor: '#e0e0e0',
borderRadius: '8px',
selector: '.skeleton',
removeDelay: 300
});
`
$3
- fade(seconds): Set fade transition time in seconds
- wave(seconds): Set wave animation time in seconds
$3
- colors(lightColor, darkColor): Set custom colors for the gradient
- radius(value): Set custom border radius (e.g., '5px', '50%')
$3
- select(selector): Target elements with a custom CSS selector
- applyTo(elements): Apply to specific DOM elements
- refresh(): Re-apply to all matching elements
$3
- create(options): Create a standalone skeleton element
`javascript
skeletony.create({
width: '300px',
height: '200px',
aspectRatio: '16/9'
});
`
$3
- removeFrom(element): Manually remove skeleton from an element
- reset(): Reset all configuration to defaults
Browser Compatibility
Skeletony works in all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Examples
$3
`html
`
$3
`html
Card Title
Card content goes here...
`
License
MIT License
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)