Loading animation

Developer
Alejandro Montañez
Size
2,408 Kb
Views
34,408
  1. Loading animation Previews
  2. Loading animation HTML Codes
  3. Loading animation CSS Codes
  4. Loading animation JS Codes

How do I make an loading animation?

Simple loading animation with jquery and css. What is a loading animation? How do you make a loading animation? This script and codes were developed by Alejandro Montañez on 13 October 2022, Thursday.

Loading animation Previews
IQ Test

Loading animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>loading animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div> <h2>loading animation</h2> <h1>jQuery and CSS</h1>
</div>
<div id="loading"><span></span><span></span><span></span>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Loading animation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
html{background-color:#0e0f10;}
div:first-of-type{position:absolute; top:50%; left:50%;
margin:-96px 0 0 -200px;}
h1,h2{margin:0;padding:0;text-align:center;letter-spacing:3px;font-weight:lighter;font-family:'Open sans condensed','Myriad Pro',Arial,sans-serif;}
h1{font-size:72px; line-height:72px; color:#808080;}
h2{font-size:38px; line-hegiht:38px; color:#a0a0a0;}
#loading{ position:absolute; top:50%; left:50%; margin:56px 0 0 -63px;
}
#loading span{ width:32px; height:32px; float:left; border-radius:50%; opacity:0.2; background-color:#e0e0e0;
}
#loading span:not(:first-child){ margin-left:15px;
}
#loading .bubble{ -webkit-animation:bubble 450ms; animation:bubble 450ms;
}
@-webkit-keyframes bubble{ 0%{opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5);} 50%{opacity:0.9;-webkit-transform:scale(1.03);transform:scale(1.03);} 80%{opacity:1;-webkit-transform:scale(0.98);transform:scale(0.98);} 100%{-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes bubble{ 0%{opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5);} 50%{opacity:0.9;-webkit-transform:scale(1.03);transform:scale(1.03);} 80%{opacity:1;-webkit-transform:scale(0.98);transform:scale(0.98);} 100%{-webkit-transform:scale(1);transform:scale(1);}
}

Loading animation - Script Codes JS Codes

function animar(){$('#loading span').each(function(i){ var t=$(this);setTimeout(function(){ t.addClass('bubble');setTimeout(function(){ t.removeClass('bubble') },450);if(i==2)animar() },((i+1)*450))
})}animar()
Loading animation - Script Codes
Loading animation - Script Codes
Home Page Home
Developer Alejandro Montañez
Username codeams
Uploaded October 13, 2022
Rating 3
Size 2,408 Kb
Views 34,408
Do you need developer help for Loading animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alejandro Montañez (codeams) Script Codes
Name
Animated scroll in 3 lines of jQuery
Personal website layout
My favorite palettes
Such Spinners, Much Loading
Background entrance animation
Next Effect
Minimalist Wordpress login
Random color
Another loading animation
Loading
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!