53 Cool CSS3 Loading Indicator Animations

Add-ons

2026-07-26 00:14 2 次浏览 • 0 次下载 218.9KB

53 Cool CSS3 Loading Indicator Animations

Plugin Description: loadawesome is an amazing collection of pure CSS3 loading indicator animations. It includes 53 different loading effects. It is easy to use, with a separate CSS file for each loading effect. You only need to include a CSS file that is just a few KB in size.

Quick Tutorial

load-awesome is an amazing collection of pure CSS3 loading indicator animations. It includes 53 different loading effects. It is easy to use, with a separate CSS file for each loading effect. You only need to include a CSS file that is just a few KB in size.

You can use Bower to install the files required for this loading indicator effect.

1	`bower install load-awesome`

Usage

To use it, simply include the CSS file for the loading effect you want, such as ball-atom.css.

1	`<link` `rel="stylesheet"` `type="text/css"` `href="assets/ball-atom.css"` `/>`

HTML Structure

The HTML structure of this loading indicator can use a <div> as its wrapper container, with the class for the desired effect specified. For example, the class for the atom ball effect is la-ball-atom.

<div class="la-ball-atom">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

The animations folder in the download package contains a corresponding file for each effect. You can browse it to find the HTML structure of the Loading effect you need.

CSS Styles

You can change the color of the loading indicator:

.la-ball-atom {
    color: #79bbb5;
}

You can also change the colors of the child elements in the loading indicator:

.la-ball-atom > div:nth-child(1) {
    color: #f4696b;
}
.la-ball-atom > div:nth-child(2) {
    color: #87c4a3;
}
.la-ball-atom > div:nth-child(3) {
    color: #fec54f;
}