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 → ZachSaucier → Asset Loading Effects

ZachSaucier / Asset Loading Effects

Loading effects for assets including some built in animated reveals

Labels

css

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

Asset loading effects

Effect demos:

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:

<div class="ale" data-ale-type="diagonal" data-ale-src="/img/url.jpg">

Video example:

<div class="ale" data-ale-type="diagonal" data-ale-src="/vid/vidFile.mp4" data-ale-src-backup="/vid/backupVidFile.mpeg" data-ale-is-vid=true>

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 will help you if you're seeking to make your own effects.

Follow me: Twitter, CodePen, GitHub

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].