Css loading page animation

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Delightful, performance-focused pure css loading animations.

ConnorAtherton/loaders.css

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Add info about scaling/size of loaders to Readme

Git stats

Files

Failed to load latest commit information.

README.md

Delightful and performance-focused pure css loading animations.

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.

• Include loaders.min.css
• Create an element and add the animation class (e.g. )
• Insert the appropriate number of s into that element

• Include loaders.min.css , jQuery, and loaders.css.js
• Create an element and add the animation class (e.g. )
• 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

Changing the background color

Add styles to the correct child div elements

.ball-grid-pulse > div < background-color: orange; >

.loader-small .loader-inner < transform: scale(0.5, 0.5); >

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
✔	✔	✔	✔

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.

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

• React — Jon Jaques built a React demo you can check out here
• Vue — Kirill Khoroshilov loaders wrapped into components vue-loaders
• Angular — the-corman created some directives for angular, as did Masadow in this pr
• Ember — Stanislav Romanov created an Ember addon ember-cli-loaders for using Loaders.css in Ember applications
• iOS — ninjaprox and ontovnik
• Android — Jack Wang created a library and technofreaky created an app

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.

About

Delightful, performance-focused pure css loading animations.

Источник

60 inspiring Loading Animations (CSS and JavaScript)

Looking for creative and inspiring CSS loading animations to bridge website wait times? Our selection of the most innovative CSS spinners is the perfect solution. Discover how these loading animations can enhance your web applications and keep your users engaged with seamless loading experiences.

Sometimes it takes a few seconds for a complex website or application to load. So that your visitor knows that something is happening, you should definitely include a loading animation – this is also quite simple, as I will demonstrate at the end of the post with a short video.

If you like a loading animation, you can simply copy&paste 🙂

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Dump Truck Loading Animation

Author: Jon Kantner;
Coded in: HTML, CSS (SCSS), JS;

#2 Square in a circle – Loading Animation

Author: Ray;
Coded in: HTML, CSS (SCSS);

#3 Rainbow Loader

Author: Jack Rugile;
Coded in: HTML, CSS;

#4 CSS Text filling with water

Author: Lucas Bebber;
Coded in: HTML, CSS (SCSS);

#5 Single Element CSS-Only Absolute Center Overlay Spinner

Author: MattIn4D;
Coded in: HTML, CSS;

#6 Material Design Spinner

Author: Fran Pérez;
Coded in: HTML, CSS (SCSS);

#7 Loading

See the Pen Loading by dissimulate (@dissimulate) on CodePen.

Author: dissimulate;
Coded in: HTML, CSS;

#8 Cog loading animation

Author: Jamie Coulter;
Coded in: HTML (Haml), CSS (SCSS);

#9 Cube loading animation

Author: Paul Grant;
Coded in: HTML, CSS (SCSS);

#10 CSS loading animation 12

Author: Martin van Driel;
Coded in: HTML, CSS;

#11 Loading Animation

Author: Ioic;
Coded in: HTML, CSS (SCSS);

#12 Pacman loading animation in one div

Author: Iddar Olivares;
Coded in: HTML, CSS (Less);

#13 Loading Animation CSS

Author: Tatsuya Azegami;
Coded in: HTML, CSS (SCSS);

#14 CSS Dash Loader

See the Pen CSS Dash Loader by Cassidy Williams (@cassidoo) on CodePen.

Author: Cassidy Williams;
Coded in: HTML, CSS;

#15 Compose loading animation

Author: Brandon Mathis;
Coded in: HTML, CSS (SCSS);

#16 CSS Loading Animation

Author: John Urbank;
Coded in: HTML (Haml), CSS (Sass);

#17 Only CSS Loader – Wizard

Author: Guilmain Dorian;
Coded in: HTML (Pug), CSS (SCSS);

#18 Random geometric shapes loading animation

Author: Tony Banik;
Coded in: HTML (Slim), CSS (SCSS), JS;

#19 Canvas loading animation

Author: Rachel Smith;
Coded in: HTML, CSS (SCSS), JS;

#20 XBox SmartGlass Loading Animation

Author: Adam Argyle;
Coded in: HTML (Pug), CSS (Stylus);

#21 Loading Animation MySensors

Author: Edoardo;
Coded in: HTML, CSS (SCSS);

#22 CSS Pancake Loader

Author: Dario Corsi;
Coded in: HTML, CSS (SCSS);

#23 Loading Animation

Author: John Heiner;
Coded in: HTML, CSS (SCSS);

#24 Rotate / Pulse Loading Animation

Author: Colin Horn;
Coded in: HTML, CSS (SCSS), JS;

#25 CSS Loading Animation

Author: Glen Cheney;
Coded in: HTML (Haml), CSS (SCSS), JS;

#26 Authentic Weather Loader

Author: Tim Holman;
Coded in: HTML, CSS (SCSS);

#27 Loading Animation with Morphing SVG

Author: Heather Buchel;
Coded in: HTML, CSS (SCSS);

#28 CSS open store animation

Author: Mariana Beldi;
Coded in: HTML, CSS;

#29 CSS Loading Animation

Author: Ahmad Emran;
Coded in: HTML, CSS;

#30 Cat Loader

Author: Claudia;
Coded in: HTML, CSS (SCSS), JS (TweenMax.js);

#31 Button Loading Animation

Author: Joshua Ward;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#32 Floating Loading Animation

Author: Mario Duarte;
Coded in: HTML, CSS (SCSS);

#33 Organic Button

Author: Rik Schennink;
Coded in: HTML, CSS (SCSS), JS;

#34 Switch loading animation

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#35 Download progress animation

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#36 CSS3 Loading animations

Author: Manoz;
Coded in: HTML, CSS;

#37 CSS3 Loader & Spinners

Author: Vineeth.TR;
Coded in: HTML (Pug), CSS (SCSS);

#38 Download Button Animation

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#39 Cat loader

Author: Rplus;
Coded in: HTML (Pug), CSS (SCSS);

#40 Loading

See the Pen Loading by Vladislav Trefil (@v_trefil) on CodePen.

Author: Vladislav Trefil;
Coded in: HTML (Pug), CSS (Sass), JS (jQuery);

#41 Glitch Loading Indicator

Author: Jack Rugile;
Coded in: HTML, CSS, JS (jQuery, lettering.js);

#42 Colored Loader

See the Pen Untitled by Dave McCarthy (@AsLittleDesign) on CodePen.

Author: Dave McCarthy;
Coded in: HTML (Haml), CSS (Sass);

#43 Interactive Skate Loading

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#44 CSS Loading Animations

Author: Alex;
Coded in: HTML, CSS;

#45 Pikachu Loading Page

Author: Hazem Ashraf;
Coded in: HTML, CSS, JS (jQuery);

#46 Spinners using Font Icons

Author: Keyamoon;
Coded in: HTML, CSS;

#47 TRON Spinner

Author: simurai;
Coded in: HTML, CSS (SCSS);

#48 SpinKit

See the Pen SpinKit by Nicola Pressi (@ibanez182) on CodePen.

Author: Nicola Pressi;
Coded in: HTML (Haml), CSS (SCSS);

#49 Loader

See the Pen Loader by Vallée Antoine (@Antoine-360pixel) on CodePen.

Author: Vallée Antoine;
Coded in: HTML, CSS (SCSS);

#50 CSS3 Loading Spinner

Author: Matthew Roelle;
Coded in: HTML (Haml), CSS (Sass);

#51 Loading animation by Kayleigh

See the Pen Loading animation by Kayleigh Foley (@kayfo23) on CodePen.

Author: Kayleigh Foley;
Coded in: HTML, CSS, JS (gsap.js, DrawSVGPlugin3.js);

#52 Loading animation by Mohamed

See the Pen Loading Animation by Mohamed Yousef (@Freeps2) on CodePen.

Author: Mohamed Yousef;
Coded in: HTML, CSS;

#53 HTML ve CSS ile Loading Animation | 10

Author: 1kodum;
Coded in: HTML, CSS;

#54 HTML ve CSS ile Loading Animation | 7

Author: 1kodum;
Coded in: HTML, CSS;

#55 HTML ve CSS ile Loading Animation | 8

Author: 1kodum;
Coded in: HTML, CSS;

#56 HTML ve CSS ile Loading Animation Tasarlama | 2

Author: 1kodum;
Coded in: HTML, CSS;

#57 HTML ve CSS ile Loading Animation | 5

Author: 1kodum;
Coded in: HTML, CSS;

#58 HTML ve CSS ile Loading Animation | 4

Author: 1kodum;
Coded in: HTML, CSS;

#59 Flight Loading Animation

Author: Dinesh Basnet;
Coded in: HTML, CSS;

#60 Nvidia Loading Animation

Author: gambhirsharma;
Coded in: HTML, CSS;

How to add the JS & CSS loading animation to your website

Conclusion

Which loading animation did you like best? If you have also published a loading animation on codepens, please let me know so that I can expand this list! 🙂

Note: All buttons are all published on codepen.io and not by me.

Still not enough? Then this could be something for you:

Источник

Creating a CSS Animated Loading Card

Now we add a loading animation. This will be a CSS animation @keyframes that will move the background to give it a shining effect.

Here is the CSS animation:

@keyframes shine  to  background-position-x: -200%; > > 

Here is the is-loading class that will add the backgrounds to the image, header, and paragraph.

.card.is-loading  .image, h2, p  background: #eee; background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%); border-radius: 5px; background-size: 200% 100%; animation: 1.5s shine linear infinite; > .image  height: 200px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; > h2  height: 30px; > p  height: 70px; > > 

The important line here is the animation line:

animation: 1.5s shine linear infinite; 

We are animating the background infinitely so that the gradient keeps moving across the element.

Источник