travel loading animation

CSS Loading Animations: How to Make Them + 15 Templates I Love

Published: June 26, 2024

When visitors click on a link or button on your website, they expect visual feedback. But if nothing happens, most will think that something is wrong. If you don’t have a placeholder like a CSS loading animation, they'll click away without realizing your site was processing their request.

Loading animations can prevent these bounces and provide a better user experience by signaling people that their request has been received and is being processed.

While some website builders offer built-in animation features, you can create your own with HTML and CSS . In this post, I’ll explain how to make an animation with a bit of web development knowledge. Plus, I’ll give some loading animation templates I’ve created as inspiration for your own.

Table of Contents

What is a loading animation?

How to make a simple loading animation with css, examples of css loading animations, why use css for loading animations, css loading animation best practices, add a css loading animation to your site.

A loading animation is a kind of animation that indicates to users that the website or application is handling their request in their background. A loading animation reassures users that their request has been accepted and is being processed.

Loading animations may display when data is being fetched or processed, or when page content is being loaded. The animation displays until the loading process is complete.

Loading animations can take different forms, like progress bars, spinning or pulsing icons, or skeleton screens that act as visual placeholders for page content.

CSS animations for loading are relatively simple to make, so let's walk through an example that you can deploy on your site right away.

How to Make a Spinning Loading Animation with CSS

Let’s start with this spinner, which is actually pretty straightforward to make:

See the Pen CSS Loading Spinner Example by HubSpot ( @hubspot ) on CodePen .

First, I’ll create a div and give it the class loader .

See the Pen Untitled by HubSpot ( @hubspot ) on CodePen .

Next, I’ll target this div with the following CSS:

Here’s what each of these properties does:

• The margin property is set to “auto” to center the loader on the page.
• The border property defines the size, style, and color of the loader's border, which appears as the circular track that the orange ribbon moves around.
• The border-radius property set to 50% makes the loader into a circle .
• The border-top property defines the size, style, and color of the moving orange ribbon. It has the same size and style as the border — only the color is different.
• The width and height properties define the size of the loading animation (the entire circle).
• The animation property defines the name, duration, timing, and iteration account. In this example, the spinner is set to move at the same speed from start to end for 4 seconds and loop indefinitely.

Then, we have the animation’s keyframes, which describe how the loader should render at a given time during the animation sequence. Make sure to use the animation name defined in the animation property (in this case, “spinner.”)

50 Free Coding Templates

Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

• Navigation Menus & Breadcrumbs Templates
• Button Transition Templates
• CSS Effects Templates

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Only two keyframes are defined in this example. The first occurs at 0%, or the start of the animation sequence, when the loader is configured to be rotated 0 degrees. The second keyframe occurs at 100%, the end of the animation sequence, when the loader is rotated 360 degrees. Therefore, the ribbon completes a full rotation over the course of four seconds.

You can also define border-bottom to add a second spinning ribbon:

See the Pen CSS Loading Spinner Example - two borders by HubSpot ( @hubspot ) on CodePen .

… and you can define border-right and border-left to add multiple colors:

See the Pen CSS Loading Spinner Example - four borders by HubSpot ( @hubspot ) on CodePen .

How to Create a Spinner in Bootstrap

If you’re using the CSS framework Bootstrap , you have a built-in way to create a couple kinds of animations for your loading states.

To make a spinner in Bootstrap, use the following code:

<div class=“spinner-border” role=“status”></div>

Here’s what that code looks like in action.

See the Pen css loading animation - bootstrap spinner by HubSpot ( @hubspot ) on CodePen .

Note that I’ve added the m-5 (margin) value for presentation purposes — you can change this value or remove it based on your needs.

Bootstrap also includes a growing spinner, which you can insert with the following code:

<div class=“spinner-grow” role=“status”></div>

Visually, here’s what the growing spinner looks like:

See the Pen css loading animation - bootstrap spinner 2 by HubSpot ( @hubspot ) on CodePen .

1. Growing and Shrinking Square Loading Animation

This example consists of a square that both changes size and rotates over the course of the animation duration. Try changing the cubic bezier function (basically a fancy way to customize the timing of your animation) to change how the animation effect looks.

See the Pen css loading animation: growing and shrinking by HubSpot ( @hubspot ) on CodePen .

2. Scaling Ellipses Loading Animation

This next example is another effective alternative to the spinning visual.

The div labeled loader contains three child divs, and each of these is assigned the same animation. However, the start of the animation for the second and third child divs is delayed with the animation-delay property, creating a ripple effect.

See the Pen css loading animation: pulsing example by HubSpot ( @hubspot ) on CodePen .

3. Bouncing Ellipses Loading Animation

Similar to the previous example, the dots in this example bounce up and down instead of scaling. It’s a more playful way to communicate the same message.

See the Pen CSS loading animation - jumping dots by HubSpot ( @hubspot ) on CodePen .

4. Pulsing Circle Loading Animation

This example uses the CSS scale and opacity properties to create a pulsing effect.

See the Pen CSS loading animation - pulsing circle by HubSpot ( @hubspot ) on CodePen .

5. Spinning Gradient Loading Animation

One of my personal favorites, this animation is similar to the spinner example covered above. The gradient border effect is achieved by first drawing a circle with a gradient background, and then placing a circle on top of it that matches the background color, so only a sliver of the gradient circle is visible.

See the Pen css loading animation - gradient spinner by HubSpot ( @hubspot ) on CodePen .

6. Progress Bar Loading Animation

Here’s an example of a simple progress bar that fills over a fixed time interval.

See the Pen CSS loading animation - progress bar 1 by HubSpot ( @hubspot ) on CodePen .

To make the bar load in conjunction with the actual backend loading process, you need JavaScript to fetch loading information. Here’s a template you can use where backend loading is simulated with JavaScript

See the Pen CSS loading animation - progress bar 2 by HubSpot ( @hubspot ) on CodePen .

I’ve also pulled this example from CodePen with a bit more visual flair:

See the Pen progress by Both ( @bold02 ) on CodePen .

7. Ripple Effect Loading Animation

This ripple loading animation template creates a relaxing effect reminiscent of water droplets. You can easily speed up or slow down the effect by tweaking the keyframes.

See the Pen CSS loading animation - ripple by HubSpot ( @hubspot ) on CodePen .

8. Loading Text Animation with Ellipses

Nothing wrong with simply telling the user their content is loading. Here’s a subtle animation that reveals the ellipses after the word in a stepwise way.

See the Pen CSS loading animation - loading text animaton by HubSpot ( @hubspot ) on CodePen .

9. Loading Text Animation with Cards

Here is another take on the loading text, this time with flipping cards to keep the user engaged.

See the Pen CSS loading animation - text animation 2 by HubSpot ( @hubspot ) on CodePen .

10. Spinning Gear Loading Animation

This example uses a rotating SVG of a gear to communicate that the back end is working away:

See the Pen CSS loading animation - gears 1 by HubSpot ( @hubspot ) on CodePen .

I can also add a second gear and some additional CSS to make it look like the cogs are interlocked:

See the Pen CSS loading animation - gears 2 by HubSpot ( @hubspot ) on CodePen .

11. Fading Bars Loading Animation

Here’s another engaging animation whose visuals imply loading on the backend. The rapidly changing opacity on the div elements creates a sort of “scanning” effect.

See the Pen CSS loading animation - fading bars animation by HubSpot ( @hubspot ) on CodePen .

12. Newton’s Cradle CSS Animation

This example from CodePen is an impressively creative recreation of a Newton's cradle effect that you can adapt for a loading animation.

See the Pen Newton's cradle using only CSS by Arushi Bajpai ( @arushi011 ) on CodePen .

I’ve taken the code and modified it for a more minimalist look:

See the Pen Newton's cradle using only CSS - minimalist version by HubSpot ( @hubspot ) on CodePen .

13. Liquid Fill Loading Animation

This CodePen animation gives the illusion of an element “filling up” with fluid as an alternative to a loading bar.

See the Pen Play Fill Loader by Chris Gannon ( @chrisgannon ) on CodePen .

14. Skeleton Screen Animation example

Skeleton screens start as a blank page with placeholders for the content you'll see. The elements are gradually revealed until the page is fully loaded.

Image Source

Here’s an example of a skeleton screen loading animation that holds users’ attention until all visible page content is loaded.

See the Pen Skeleton Screen Demo by Joe ( @hijiangtao ) on CodePen .

15. Advanced Spinner Loading Animations

Since spinners are such a common type of infinite-loading animation, let's take a look at a few more examples below.

In this example , the animation-timing property of the loading spinner below is set to “ease-in-out,” which means it has both a slow start and a slow end.

See the Pen css svg spinner by Fabio Ottaviani ( @supah ) on CodePen .

This animation example animates an SVG:

See the Pen Trinity spinner by Abraham Samma ( @ABSamma ) on CodePen .

Lastly, this example cleverly implements box shadow to make a glowing effect:

See the Pen Glowing Loader Ring Animation by Ekta maurya ( @Curlmuhi ) on CodePen .

To be clear, you could use another coding language like JavaScript (JS) or a simple animated GIF for your loader.

However, CSS has some strengths that make it a practical solution for this purpose:

• It's easy to edit. You can quickly adjust the duration, color, speed, and other animation elements.
• It doesn't lose quality when it changes scale.
• Animations are fast and smooth with graphics processing unit (GPU) acceleration (faster than JS).
• It's possible to pause with the animation-play-state property.

CSS loading animations may not be supported by some browsers, such as Internet Explorer 9 and Opera Mini. If you‘re not sure if it’s supported, tools like Modernizr can tell you if they are. For browsers that don't support CSS loading animations, you can use a GIF instead.

A loading animation should be carefully considered in terms of how it may impact user experience. So, consider the following tips to create an effective CSS loading animation.

The best loading animations take the least amount of time.

No matter how cute your spinning cat animation may look, users will grow impatient if it lasts too long. Keep your users' expectations in mind and make sure your animation takes as little time as possible. Users will appreciate a faster loading time more than a beautiful spinner.

Ease the pain of waiting.

If you provide the user with something interesting to look at, the wait will be less agonizing. An engaging animation will attract attention and keep the user busy.

Your animation is part of your brand.

While this isn‘t the place for a marketing campaign, it’s important to keep your loader on-brand. Use your company's palette and tone of voice to remain consistent with your brand.

Let the user know the reason for the wait.

It‘s not always obvious why the user needs to wait, and telling them can reduce friction during wait times. You don’t have to be overly specific. Instead, simple statements like, “Please wait while we get you set up” or “Wait a moment while we fetch your newly created document” work well.

Provide a wait-time estimation.

A time estimate sets expectations and helps users wait patiently. You can show this estimate as a percentage or as a visual representation of progress.

A CSS loading animation helps users be patient with your tool or website. It lets them know the system hasn‘t crashed, tells them how long a page will take to load, and maintains their attention by providing something to look at. The best part? It’s easy to create a loading animation with some basic web design knowledge.

Editor's note: This post was originally published in February 2020 and has been updated for comprehensiveness.

Don't forget to share this post!

Related articles.

30 Creative and Unique CSS Animation Examples to Inspire Your Own

12 Examples of CSS Drop-Down Animations in 2023

How to Add a CSS Fade-in Transition Animation to Text, Images, Scroll & Hover

How to Use CSS to Make an Animated Gradient

Animatable CSS Properties List: Every One You Should Know

The CSS Animation Timing Function: How to Use It + 9 Examples

The CSS animation-iteration-count Property, Explained

How to Create CSS Card Animations

How to Create CSS Animations on Scroll

How to Create SVG CSS Animations [+ Examples]

Dozens of free coding templates you can start using right now

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

Loading, waiting, and spinning animations

Gif, svg, apng loading animations.

Loading GIF or, so called loader gif is an animation that indicates a loading process on a web-site or an application. Being an critically important part of web-site and application design and usability, mostly the animations are used to show that something is loading on the background (e.g. AJAX applications). The animation objects are usually used in GIF format which is very popular due to it's history, but the loading images in SVG and CSS format are getting more and more poplular because of infinite size scalability - they can have any dimensions and relatively smaller size in bytes. There is also APNG (or animated PNG) format which appeared because of the GIF limitations , but was denied by a number of comminities in the beginning. At the moment the APNG format is supported by most major browsers now. It's still not very popular due to it's size in bytes comparing to all other formats.

Preloaders.net project provides more than 1000 different animations, split into 18 categories including most widely used loading spinners , horizontal bars , animated custom texts and others. Most of the non-3D images are available in 3 formats - GIF, APNG and SVG. For user convenience the images can be sorted to include only animations that are available in SVG format and by other options. Another subproject of ours provides the loading animations in CSS format .

But it's not the main functionality of the project. It's the generator form that allows users to modify the animated images as desired from within the web-site and create own unique "pre-loaders". Just click on a desired animation and you can set your own custom image colors, size, animation speed, frames amount and other advanced options. All loading icons on Preloaders.net project are free of charge both for personal and commercial use (except for re-distribution, which requires a reference to the project).

Most of the animations have the "add to cart" button. This button is there for users who are willing to purchase a source file (in Adobe Photoshop (.PSD) or 3DS Max (.MAX) format) for advanced use of the corresponding animation.

Loading icons by category

C S S Loaders

600+ single element loaders

The Biggest Collection of Loading Animations

Over 600+ CSS-only loaders made using a single element

Don't know which loader to use? Here is one for you 👇

Click the loader to copy the CSS

• How to test Rest APIs properly
• Node.js tutorial for beginners
• Program your own WYSIWYG editor
• Node.js Login System
• Node.js in Double Opt-In
• What is CI/CD?
• GitHub Actions Basics
• Docker vs. VM
• Linux Commands for Beginners
• Website security tips
• jQuery to JavaScript Converter
• Free SEO Tools
• Adblocker Detection Script
• Cool CSS Buttons
• Awesome CSS Background Patterns
• Inspiring CSS Loading Animations
• 404 Page Templates
• Pretty CSS Menus
• Awesome CSS Hamburger Menus
• Beautiful CSS Forms
• GitHub Actions Tutorial
• Docker vs. VMs
• CI/CD in Plesk
• Node.js Tutorial
• Rest API Testing
• Node.js Double Opt-In
• Best WordPress Plugins
• Useful WordPress Snippets
• WYSIWYG editor in comments
• WordPress Table of Contents
• Ajax in WordPress
• 💯 Best VSCode Extensions
• 🤖 AI in software development

60 CSS Loading Animations

Looking for creative and inspiring CSS Loaders to bridge website wait times? Our selection of the most innovative CSS Loading animations and Spinners is the perfect solution. Discover how these CSS Loader 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.

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

See the Pen Dump Truck Loading Animation by Jon Kantner ( @jkantner ) on CodePen .

Author Jon Kantner

Coded with HTML, CSS (SCSS), JS

#2 Square in a circle – Loading Animation

See the Pen Square in a circle – Loading Animation by Ray ( @raymondyang ) on CodePen .

Coded with HTML, CSS (SCSS)

#3 Rainbow Loader

See the Pen Rainbow Loader by Jack Rugile ( @jackrugile ) on CodePen .

Author Jack Rugile

Coded with HTML, CSS

#4 CSS Text filling with water

See the Pen CSS Text filling with water by Lucas Bebber ( @lbebber ) on CodePen .

Author Lucas Bebber

#5 Single Element CSS-Only Absolute Center Overlay Spinner

See the Pen Single Element CSS-Only Absolute Center Overlay Spinner by MattIn4D ( @MattIn4D ) on CodePen .

Author MattIn4D

#6 Material Design Spinner

See the Pen Material Design Spinner by Fran Pérez ( @mrrocks ) on CodePen .

Author Fran Pérez

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

Author dissimulate

#8 Cog loading animation

See the Pen Cog loading animation by Jamie Coulter ( @jcoulterdesign ) on CodePen .

Author Jamie Coulter

Coded with HTML (Haml), CSS (SCSS)

#9 Cube loading animation

See the Pen Cube loading animation by Paul Grant ( @cssinate ) on CodePen .

Author Paul Grant

#10 CSS loading animation 12

See the Pen CSS loading animation 12 by Martin van Driel ( @martinvd ) on CodePen .

Author Martin van Driel

#11 Loading Animation

See the Pen Loading Animation by loic ( @loic_album ) on CodePen .

Author Ioic

#12 Pacman loading animation in one div

See the Pen Pacman loading animation in one div by Iddar Olivares ( @iddar ) on CodePen .

Author Iddar Olivares

Coded with HTML, CSS (Less)

#13 Loading Animation CSS

See the Pen Loading Animation CSS by Tatsuya Azegami ( @42EG4M1 ) on CodePen .

Author Tatsuya Azegami

#14 CSS Dash Loader

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

Author Cassidy Williams

#15 Compose loading animation

See the Pen Compose loading animation by Brandon Mathis ( @imathis ) on CodePen .

Author Brandon Mathis

#16 CSS Loading Animation

See the Pen CSS Loading Animation by John Urbank ( @jurbank ) on CodePen .

Author John Urbank

Coded with HTML (Haml), CSS (Sass)

#17 Only CSS Loader – Wizard

See the Pen Only CSS Loader – Wizard by Guilmain Dorian ( @Craaftx ) on CodePen .

Author Guilmain Dorian

Coded with HTML (Pug), CSS (SCSS)

#18 Random geometric shapes loading animation

See the Pen Random geometric shapes loading animation by Tony Banik ( @banik ) on CodePen .

Author Tony Banik

Coded with HTML (Slim), CSS (SCSS), JS

#19 Canvas loading animation

See the Pen Canvas loading animation by Rachel Smith ( @rachsmith ) on CodePen .

Author Rachel Smith

#20 XBox SmartGlass Loading Animation

See the Pen XBox SmartGlass Loading Animation by Adam Argyle ( @argyleink ) on CodePen .

Author Adam Argyle

Coded with HTML (Pug), CSS (Stylus)

#21 Loading Animation MySensors

See the Pen Loading Animation MySensors by Edoardo ( @edoardoo ) on CodePen .

Author Edoardo

#22 CSS Pancake Loader

See the Pen CSS Pancake Loader by Dario Corsi ( @dariocorsi ) on CodePen .

Author Dario Corsi

#23 Loading Animation

See the Pen Loading Animation by John Heiner ( @johnheiner ) on CodePen .

Author John Heiner

#24 Rotate / Pulse Loading Animation

See the Pen Rotate / Pulse Loading Animation by Colin Horn ( @colinhorn ) on CodePen .

Author Colin Horn

#25 CSS Loading Animation

See the Pen CSS Loading Animation by Glen Cheney ( @Vestride ) on CodePen .

Author Glen Cheney

Coded with HTML (Haml), CSS (SCSS), JS

#26 Authentic Weather Loader

See the Pen Authentic Weather Loader by Tim Holman ( @tholman ) on CodePen .

Author Tim Holman

#27 Loading Animation with Morphing SVG

See the Pen Loading Animation with Morphing SVG! by Heather Buchel ( @hbuchel ) on CodePen .

Author Heather Buchel

#28 CSS open store animation

See the Pen CSS open store animation by Mariana Beldi ( @marianab ) on CodePen .

Author Mariana Beldi

#29 CSS Loading Animation

See the Pen CSS Loading Animation by Ahmad Emran ( @ahmadbassamemran ) on CodePen .

Author Ahmad Emran

#30 Cat Loader

See the Pen #07animation: cat loader by Claudia ( @eyesight ) on CodePen .

Author Claudia

Coded with HTML, CSS (SCSS), JS (TweenMax.js)

#31 Button Loading Animation

See the Pen Button Loading Animation by Joshua Ward ( @joshuaward ) on CodePen .

Author Joshua Ward

Coded with HTML, CSS (SCSS), JS (jQuery)

#32 Floating Loading Animation

See the Pen Floating Loading Animation by Mario Duarte ( @MarioDesigns ) on CodePen .

Author Mario Duarte

#33 Organic Button

See the Pen Organic Button by Rik Schennink ( @rikschennink ) on CodePen .

Author Rik Schennink

#34 Switch loading animation

See the Pen Switch loading animation by Aaron Iker ( @aaroniker ) on CodePen .

Author Aaron Iker

#35 Download progress animation

See the Pen Download progress animation by Aaron Iker ( @aaroniker ) on CodePen .

Coded with HTML, CSS (SCSS), JS (GSAP)

#36 CSS3 Loading animations

See the Pen CSS3 Loading animations by Manoz ( @Manoz ) on CodePen .

Author Manoz

#37 CSS3 Loader & Spinners

See the Pen CSS3 Loader & Spinners by Vineeth.TR ( @vineethtrv ) on CodePen .

Author Vineeth.TR

#38 Download Button Animation

See the Pen Download Button Animation by Aaron Iker ( @aaroniker ) on CodePen .

#39 Cat loader

See the Pen [CSS] Cat loader by Rplus ( @Rplus ) on CodePen .

Author Rplus

#40 Loading

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

Author Vladislav Trefil

Coded with HTML (Pug), CSS (Sass), JS (jQuery)

#41 Glitch Loading Indicator

See the Pen Glitchy Loading Indicator by Jack Rugile ( @jackrugile ) on CodePen .

Coded with HTML, CSS, JS (jQuery, lettering.js)

#42 Colored Loader

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

Author Dave McCarthy

#43 Interactive Skate Loading

See the Pen Interactive Skate Loading by Aaron Iker ( @aaroniker ) on CodePen .

#44 CSS Loading Animations

See the Pen CSS Loading Animations by Alex ( @AlexWarnes ) on CodePen .

Author Alex

#45 Pikachu Loading Page

See the Pen Pikachu Loading Page by Hazem Ashraf ( @Tetsu ) on CodePen .

Author Hazem Ashraf

Coded with HTML, CSS, JS (jQuery)

#46 Spinners using Font Icons

See the Pen Spinners using Font Icons by Keyamoon ( @Keyamoon ) on CodePen .

Author Keyamoon

#47 TRON Spinner

See the Pen TRON Spinner by simurai ( @simurai ) on CodePen .

Author simurai

#48 SpinKit

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

Author Nicola Pressi

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

Author Vallée Antoine

#50 CSS3 Loading Spinner

See the Pen CSS3 Loading Spinner by Matthew Roelle ( @Mattykins ) on CodePen .

Author Matthew Roelle

#51 Loading animation by Kayleigh

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

Author Kayleigh Foley

Coded with 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

#53 HTML ve CSS ile Loading Animation | 10

See the Pen HTML ve CSS ile Loading Animation | 10 by 1kodum ( @1kodum ) on CodePen .

Author 1kodum

#54 HTML ve CSS ile Loading Animation | 7

See the Pen HTML ve CSS ile Loading Animation | 7 by 1kodum ( @1kodum ) on CodePen .

#55 HTML ve CSS ile Loading Animation | 8

See the Pen HTML ve CSS ile Loading Animation | 8 by 1kodum ( @1kodum ) on CodePen .

#56 HTML ve CSS ile Loading Animation Tasarlama | 2

See the Pen HTML ve CSS ile Loading Animation Tasarlama | 2 by 1kodum ( @1kodum ) on CodePen .

#57 HTML ve CSS ile Loading Animation | 5

See the Pen HTML ve CSS ile Loading Animation | 5 by 1kodum ( @1kodum ) on CodePen .

#58 HTML ve CSS ile Loading Animation | 4

See the Pen HTML ve CSS ile Loading Animation | 4 by 1kodum ( @1kodum ) on CodePen .

#59 Flight Loading Animation

See the Pen Flight Loading Animation by Dinesh Basnet ( @iamdineshbasnet ) on CodePen .

Author Dinesh Basnet

#60 Nvidia Loading Animation

See the Pen Nvidia Loading Animation by gambhirsharma ( @gambhirsharma ) on CodePen .

Author gambhirsharma

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

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:

What did you think of this post?

11 Comments

• Pingback: The Best wordpress loading spinner New - Musicsustain.com

Nice animations! Consider using some of the loading spinners from  https://onedivloaders.vercel.app if you need more of these.

• Pingback: 10 awesome CSS Hamburger Menus - DEV Community
• Pingback: 10 awesome CSS Hamburger Menus | WebTutorialOnline | Programming News | Software Development | Web Development
• Pingback: 10 awesome CSS Hamburger Menus - Style Tricks
• Pingback: 10 awesome CSS Hamburger Menus
• Pingback: 25 brilliant 404 Pages with nice animations
• Pingback: 35 cool CSS Buttons - with animations!
• Pingback: JavaScript/Electron: How to force synchronously adding loading animation, calling function, and then removing animation? (unintentionally async) - The web development company
• Pingback: 9 cool and inspiring CSS animations (Oddly satisfying!)
• Pingback: Top 20 CSS Navigation Menus

Cancel reply

Your email address will not be published. Required fields are marked *

Insert Link

I have taken note of the privacy policy and agree to the storage and processing of my data by this website.

Save my name, email, and website in this browser for the next time I comment.

Join our community and subscribe to our free newsletter!