loading.css

60+ Handcrafted CSS animations that are seamless repeatable. All animations in loading.css are designed for both one time and infinitely played. Online demo could be found here (Loading.css - 50+ Seamless Repeatable CSS Animation · Loading.io ).

Loading.css is used in building GIF, APNG and animated SVG in loading.io. Check following links to see how it works:

• GIF / SVG Animation Generator from Any Image - upload your own image and generate GIF or APNG images with transition.css and loading.css.
• Loading.io Animated Icons Library - Customizable, animatable Loading.io's icon library powered by loading.css and transition.css.
• Loading Patterns - Customizable, animatable Loading.io's pattern library powered by loading.css and transition.css.
• Animated Text Generator - convert your text into GIF / SVG animations.

You can find more about animation generation in loading.io.

Usage

1. download and include loading.css:

    <link rel="stylesheet" type="text/css" href="/sitelet?url=https%3A%2F%2Fweb.archive.org%2Fweb%2F20201130023644%2Fhttps%3A%2F%2Fgithub.com%2Floadingio%2Floading.css"/>

you an use a CDN, such as, from jsDelivr:

    <link rel="stylesheet" type="text/css" href="/sitelet?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Floadingio%2Floading.css%40v2.0.0%2Fdist%2Floading.min.css"/>

2. Check the loading.css animation gallery for the animations you want to use. For example, say you want to use the spin animation

3. Use the name as a CSS class prefixed with ld on the element you want to animate:

    <div class="ld ld-spin"></div>

4. For more information, check out loading.css animation documentation.

LICENSE

MIT License