https://github.com/zachsaucier/asset-loading-effects
Loading effects for assets including some built in animated reveals
https://github.com/zachsaucier/asset-loading-effects
Last synced: 3 months ago
JSON representation
Loading effects for assets including some built in animated reveals
- Host: GitHub
- URL: https://github.com/zachsaucier/asset-loading-effects
- Owner: ZachSaucier
- Created: 2015-05-26T14:43:53.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2025-02-22T20:11:39.000Z (5 months ago)
- Last Synced: 2025-03-30T18:08:54.431Z (3 months ago)
- Language: JavaScript
- Size: 10.1 MB
- Stars: 104
- Watchers: 7
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Asset loading effects
=====================
This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, report bugs, and propose new loader ideas!
[Read about how it was made](https://zachsaucier.com/blog/asset-loading-effects/)
#### Effect demos:
- [Circular](https://zachsaucier.github.io/Asset-Loading-Effects/)
- [Sqare](https://zachsaucier.github.io/Asset-Loading-Effects/index2.html)
- [Linear with shadow](https://zachsaucier.github.io/Asset-Loading-Effects/index3.html) (Demos a video being loaded)
- [Linear](https://zachsaucier.github.io/Asset-Loading-Effects/index4.html)
- [Diagonal](https://zachsaucier.github.io/Asset-Loading-Effects/index5.html)
- [Fill](https://zachsaucier.github.io/Asset-Loading-Effects/index6.html)
- [Corner](https://zachsaucier.github.io/Asset-Loading-Effects/index7.html)
## How to use:
1. Include the necessary files. Right now that means you need to include the 3 required JS files and the CSS
2. Apply the `.ale` class to all elements you want to use a loading effect on.
3. Declare the loader type using `data-ale-type`
4. Declare the source(s) for the element using `data-ale-src`. For a secondary (backup) source, use `data-ale-src-backup`.
5. If it's a video, also declare `data-ale-is-vid=true`.
Image example:
Video example:
Please feel free to make and add your own effects and remove effects you're not using in your project! I'd love to hear suggestions for other loading effects. Understanding [how it's made](https://zachsaucier.com/blog/asset-loading-effects/) will help you if you're seeking to make your own effects.
___
## Support
Did you find this repo useful? I'd really appreciate it if you would consider buying me a coffee!
