Loading effects for assets including some built in animated reveals

Overview

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

You might also like...

Pure css cross-browser loading animations.

[ArtWorx] xLoader Pure css cross-browser loading animations. xLoader is part of the ArtWorx collection. Most of the loaders made by community, You can

Nov 15, 2021

Create cool animated SVG spinners, loaders and other looped animations in seconds

SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG

Dec 24, 2022

Animated images that are superficially attractive and entertaining but intellectually undemanding. Cool as all hell though!

Animated images that are superficially attractive and entertaining but intellectually undemanding. Cool as all hell though!

MMM-EyeCandy Animated images that are superficially attractive and entertaining but intellectually undemanding. Add some EyeCandy to your mirror. Some

Dec 28, 2022

A set of effects for mouse-following image trails that show a random series of images.

A set of effects for mouse-following image trails that show a random series of images.

Image Trail Effects A set of effects for mouse-following image trails that show a random series of images. Inspired by the effect seen on VLNC Studio.

Dec 28, 2022

Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.

90's Cursor Effects "Knowing the codes" used to be all the rage, I want to bring a few back. A repo of the old effects that inspired creativity and th

Jan 9, 2023

A set of playful dragging effects for images using various techniques.

A set of playful dragging effects for images using various techniques.

Image Dragging Effects A set of playful effects for dragging images. Article on Codrops Demo Installation Install dependencies: npm install Compile t

Dec 4, 2022

Simple styles and effects for enhancing text input interactions.

Text Input Effects Simple styles and effects for enhancing text input interactions. Article on Codrops Demo Integrate or build upon it for free in you

Jan 4, 2023

Demonstration of different animation effects with AngularJS ngView directive.

ngView-animation-effects This is a simple demonstration of how easy you can make your ngView directive transition pages with nice animations. All you

Dec 31, 2022

A bursting particles effects buttons component ✨💥❄️🌋

A bursting particles effects buttons component ✨💥❄️🌋

vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel

Nov 11, 2022
Owner
Zach Saucier
I love creating new techniques. Currently @rallyinteractive. Formerly @greensock.
Zach Saucier
image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

Gaëtan Renaudeau 797 Nov 26, 2022
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops

Codrops 1.4k Jan 4, 2023
Some ideas for decorative link distortion effects using SVG filters.

Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De

Codrops 122 Dec 4, 2022
Some shape morphing hover effects on images using SVG clipPath.

Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js

Codrops 197 Oct 16, 2022
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

JParticles · 中文 | English 官网:jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles(JavaScript Particles 的缩写)是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr

花祁 466 Dec 27, 2022
3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)

cube.less 3D (animated) cube using only CSS (LESS). Demo See this demo page. There's also a live production site (WIP) using these cubes. Install $ bo

Tunghsiao Liu 54 Nov 14, 2022
Pure CSS animated 3D Super Mario Icon

Pure CSS Super Mario This is the transferred source of a little sideproject I did in 2010. I initially did this without any CSS preprocessor and event

Andreas Jacob 14 Apr 15, 2021
Animated haze distortion effect for images and text, with WebGL.

Animated Heat Distortion Effects with WebGL A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on im

Lucas Bebber 289 Nov 1, 2022
CSS loading animations with minimal effort!

Whirl CSS loading animations with minimal effort! whirl is a curation of CSS loading animations(whirls! ?? ). It started as a drop in CSS file to get

Jhey Tompkins 1.4k Jan 4, 2023
🔮 CSS loading animations made by single element.

Three Dots The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only

Zongbin 1.2k Dec 29, 2022