Delightful, performance-focused pure css loading animations.

Related tags

Loader loaders.css
Overview

Loaders.css

Delightful and performance-focused pure css loading animations.

What is this?

See the demo

A collection of loading animations written entirely in css. Each animation is limited to a small subset of css properties in order to avoid expensive painting and layout calculations.

I've posted links below to some fantastic articles that go into this in a lot more detail.

Install

bower install loaders.css
npm i --save loaders.css

Usage

Standard
  • Include loaders.min.css
  • Create an element and add the animation class (e.g. <div class="loader-inner ball-pulse"></div>)
  • Insert the appropriate number of <div>s into that element
jQuery (optional)
  • Include loaders.min.css, jQuery, and loaders.css.js
  • Create an element and add the animation class (e.g. <div class="loader-inner ball-pulse"></div>)
  • loaders.js is a simple helper to inject the correct number of div elements for each animation
  • To initialise loaders that are added after page load select the div and call loaders on them (e.g. $('.loader-inner').loaders())
  • Enjoy

Customising

Changing the background color

Add styles to the correct child div elements

.ball-grid-pulse > div {
  background-color: orange;
}
Changing the loader size

Use a 2D Scale transform

.loader-small .loader-inner {
  transform: scale(0.5, 0.5);
}

Browser support

Check the can I use tables. All recent versions of the major browsers are supported and it has support back to IE9.

Note: The loaders aren't run through autoprefixer, see this issue.

IE 11 Firefox 36 Chrome 41 Safari 8

Contributing

Pull requests are welcome! Create another file in src/animations and load it in src/loader.scss.

In a separate tab run gulp --require coffee-script/register. Open demo/demo.html in a browser to see your animation running.

Further research

Inspired by loaders.css

A few other folks have taken loaders and ported them elsewhere.

Licence

The MIT License (MIT)

Copyright (c) 2016 Connor Atherton

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Remove prefixing

    Remove prefixing

    Everyone could/should be using Autoprefixer (or some similar/lesser tool) in their development environment. It's usually a bad practice to have prefixing in libraries.

    opened by corysimmons 15
  • Created mixins and fixes missing cross-browsers prefixes

    Created mixins and fixes missing cross-browsers prefixes

    I did some changes as introduce mixins to generate cross-browsers prefixes and fixes some missing styles too. When I built on my local machine, the demo wasn't running as I expected and as demo on your site.

    Thanks

    opened by marcelaraujo 5
  • Animation declaration dropped by Firefox

    Animation declaration dropped by Firefox

    Firefox can't parse this (example):
    animation: line-scale-pulse-out-rapid 0.9s 0 infinite cubic-bezier(.11,.49,.38,.78);

    After changing it to
    animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11,.49,.38,.78);
    it works.

    opened by octycs 5
  • Added JS to populate `.loader-inner`s

    Added JS to populate `.loader-inner`s

    Cool library. I wouldn't actually use it if I had to manually insert a random number of divs into an element.

    1. It clutters development markup
    2. It's hard to remember how many divs go into XYZ

    This PR fixes that.

    opened by corysimmons 4
  • 'ball-clip-rotate' shouldn't pulse

    'ball-clip-rotate' shouldn't pulse

    I've removed the pulsing (change in scale) of this loader, as I figured their should be a version that simply spins without any kind of pulsing - just my opinion.

    opened by superelement 2
  • Added support for angularjs

    Added support for angularjs

    Same thing as loaders.css.js but for angular users that don't want to rely on JQuery or whatever js framework.

    This code relies on angular directives to achieve the same result and changes to the loader class will be instantly reflected (provided that you're in a scope digest)

    opened by Masadow 2
  • Angular directive

    Angular directive

    Not really an issue ;) For the need of a project, I wrote a directive which is doing basically the same stuff than the JQuery but for Angular.js. I thought it could be useful for some people.

    Feel free to check it : https://github.com/the-cormoran/angular-loaders

    Thanks for the good work btw.

    opened by alexjoffroy 2
  • Possible to change speed?

    Possible to change speed?

    These are beyond incredible. Is there currently a way to access the speed of the loading animation (slower/faster transitions between a given loader's various states)?

    opened by iggyigner 2
  • New : Android App developed

    New : Android App developed

    Hi,

    I just saw this, and very impressed . so i have decided to created my first android html app using loaders.css

    Play Store Link : https://play.google.com/store/apps/details?id=com.loader.css Github App Repo : https://github.com/technofreaky/Loaders.CSS-Android-App

    opened by varunsridharan 2
  • benchmarks

    benchmarks

    The description says emphasis is on performance, but how does this compare to other libraries (daneden/[email protected]) or just an animated gif loader? Both CSS transitions and animated GIF loaders are blocked by JavaScript, but is there some other performance gain from using CSS transition loaders?

    opened by alanhamlett 2
  • Documentation on what browsers this supports

    Documentation on what browsers this supports

    I know i can dig into the code and use caniuse.com to figure this one out but I'm wondering if you know off hand what browsers this supports?

    If so then it would be awesome if you could throw a table into the Readme for quick reference.

    If not then just let me know and I'll jump in and cross reference with caniuse.com and maybe create a PR with the compatibility table :wink:

    opened by mansona 2
  • This is the best! Just one quick question

    This is the best! Just one quick question

    I think that the license made it clear that I can do this, but just one question. instead of downloading the source, can I just copy this code into a css file and link it to my index.html like you did on your website? here is the css I am talking about: click here. I was just wondering if this would work, or if I need to give attribution, or if I am even allowed to.

    opened by stub-official-band 0
  • Add a new animation.

    Add a new animation.

    Hey, I am a new open source contributer who is interested in html, css, js. I was wondering if can add a new animation to your library. I can explain further if interested.

    opened by Rishi1314 0
  • How to scale the loader's size? Here is the right code

    How to scale the loader's size? Here is the right code

    css .loader-small .loader-inner { transform: scale(0.5, 0.5); }

    HTML <div class="loader-small"> <div class="loader-inner ball-pulse"> <div></div> <div></div> <div></div> </div><span class="tooltip"> <p>ball-pulse</p></span> </div>

    opened by heiyeliuying 0
Vue Spinners CSS Loaders - Amazing collection of Vue spinners components with pure css.

Vue Spinners CSS Loaders - Amazing collection of Vue spinners components with pure css.

Josh Kuttler 51 Sep 18, 2022
SVG component to create placeholder loading, like Facebook cards loading.

SVG component to create placeholder loading, like Facebook cards loading.

EGOIST 2.9k Sep 29, 2022
Vue-loading - Vue Placeholder loading Content With Image,Table,Status

Vue Loading Project setup npm install Compiles and hot-reloads for development

Vũ Đức Việt 3 Jan 30, 2022
Data loading animation component for VueJS, inspired by video games loading screens.

Data loading animation component for VueJS, inspired by video games loading screens.

null 0 Sep 1, 2020
A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

null 1 Aug 3, 2020
🌀 A collection of loading indicators animated with CSS for VueJS

vue-spinkit A collection of loading indicators animated with CSS for VueJS Inspiration Spinkit css animated loading react-spinkit loaders.css DEMO Ins

Chanwit Piromplad 108 Sep 28, 2022
A VueJS plugin for loading external JS/CSS inside VueJS environment

External Files Head Loader A VueJS plugin for loading external JS/CSS inside VueJS environment. I created this since some of my projects need to load

KarinP 0 Jun 16, 2020
A pure Vue component submit button with a Ladda-style spinner

vue-submit A pure Vue component submit button with a Ladda-style spinner. Based on NxtChg/pieces vue-submit but with a different approach, using vue-c

null 1 Apr 18, 2019
Progress bars and loading indicators for Vue.js

vue-progress-path Progress bars and loading indicators that can take any form! This library is Work In Progress. Live Demo Sponsors Gold Silver Bronze

Guillaume Chau 403 Sep 20, 2022
BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.

vue-blockui BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen. Table of contents Installation Usage Demo Screens Installat

Jeff 57 Apr 6, 2022
Vue.js component for full screen loading indicator :cyclone:

Vue Loading Overlay Component Vue.js component for full screen loading indicator Demo or JSFiddle Installation # yarn yarn add vue-loading-overlay #

Ankur Kumar 1.1k Sep 27, 2022
⏳ Loading inside a container or full screen for Vue.js

vue-element-loading ⏳ Loading inside a container or full screen for Vue.js ?? Document & Demo Page Docs & Live demo Fully feature live demo ?? Install

Pongsatorn 312 Sep 4, 2022
a vue component about toy bricks of skeleton screen loading

tb-skeleton a vue component about toy bricks of skeleton screen loading install $ npm i tb-skeleton -s use npm import Vue from 'vue' import skelet

zhoulin 88 Aug 12, 2022
💫 A collection of loading spinner components for Vuejs

Vue Spinners A Vue.js port of react-spinners. ?? Installation npm install --save @saeris/vue-spinners # or yarn add @saeris/vue-spinners ?? Usage Ther

Drake Costa 308 Sep 26, 2022
👇 Vue button with slideout loading indicator

vue-loading-button Straightforward Vue button with slideout loading indicator Props Prop Type Required Default Description loading boolean false false

William Lindvall 39 Jun 29, 2022
Youtube Like Loading Bar Component for Vue.js

vue-loading-bar Loading Bar Component for Vue.Js DEMO Need Vue 2 Version? Click Here... Intro Vue Loading Bar is a Youtube like loading bar component

Naufal Rabbani 140 Nov 28, 2021
Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Lucas Leandro 758 Sep 19, 2022
Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Pygmy Slow Loris 161 Jul 16, 2022
An vuejs loading component ☄️

An vuejs loading component ☄️

Igor Souza Martins 19 Jul 27, 2022