Loading...
How do I make an loading...?
Another loading animation effect.... What is a loading...? How do you make a loading...? This script and codes were developed by João Victor on 06 November 2022, Sunday.
Loading... - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>loading...</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { height: 100%;
}
body { background: -webkit-radial-gradient(center center, circle cover, #078ABE, #0D343A); background: -moz-radial-gradient(center center, circle cover, #078ABE, #0D343A); background: radial-gradient(circle cover at center center, #078abe, #0d343a);
}
.loading { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 500px; height: 50px; text-transform: uppercase; font-size: 18px;
}
.loading span { display: inline-block; background: tomato; width: 50px; height: 50px; line-height: 50px; text-align: center; color: white; text-shadow: 1px 1px 0 black; position: relative; top: 0; box-shadow: inset 0 1px 1px -1px black, inset 0 -5px 1px -1px rgba(0, 0, 0, 0.5);
}
.char1 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.1s;
}
.char2 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.2s;
}
.char3 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.3s;
}
.char4 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.4s;
}
.char5 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.5s;
}
.char6 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.6s;
}
.char7 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.7s;
}
.char8 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.8s;
}
.char9 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.9s;
}
.char10 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 1s;
}
@keyframes foo { 10% { top: -10px; } 50% { top: 0; } 100% { top: 0; }
}
@keyframes bar { 10% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- h1.loading{loading...} -->
<h1 class="loading">loading...</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Loading... - Script Codes CSS Codes
html, body { height: 100%;
}
body { background: -webkit-radial-gradient(center center, circle cover, #078ABE, #0D343A); background: -moz-radial-gradient(center center, circle cover, #078ABE, #0D343A); background: radial-gradient(circle cover at center center, #078abe, #0d343a);
}
.loading { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 500px; height: 50px; text-transform: uppercase; font-size: 18px;
}
.loading span { display: inline-block; background: tomato; width: 50px; height: 50px; line-height: 50px; text-align: center; color: white; text-shadow: 1px 1px 0 black; position: relative; top: 0; box-shadow: inset 0 1px 1px -1px black, inset 0 -5px 1px -1px rgba(0, 0, 0, 0.5);
}
.char1 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.1s;
}
.char2 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.2s;
}
.char3 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.3s;
}
.char4 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.4s;
}
.char5 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.5s;
}
.char6 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.6s;
}
.char7 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.7s;
}
.char8 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.8s;
}
.char9 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 0.9s;
}
.char10 { animation: foo 2s ease infinite, bar 3s linear infinite; animation-delay: 1s;
}
@keyframes foo { 10% { top: -10px; } 50% { top: 0; } 100% { top: 0; }
}
@keyframes bar { 10% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; }
}
Loading... - Script Codes JS Codes
//lettering js
$(".loading").lettering();
Developer | João Victor |
Username | jotavejv |
Uploaded | November 06, 2022 |
Rating | 4.5 |
Size | 3,315 Kb |
Views | 12,144 |
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!
Name | Size |
Pokeball CSS | 2,742 Kb |
Slider looping CSS | 2,180 Kb |
Aku Aku CSS art | 4,829 Kb |
Vue.js Logo Animated | 3,568 Kb |
Days counter | 4,042 Kb |
Envelope CSS3 custom | 2,983 Kb |
BackboneJS pure CSS logo | 3,285 Kb |
Sweet loader | 2,715 Kb |
SandClock loader | 2,923 Kb |
Web Platform logo CSS - only one div | 2,117 Kb |
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!
Name | Username | Size |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Bloomberg Style Link Hover | Gil-- | 1,609 Kb |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
Cloud upload | Jaflo | 2,774 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Background Images | Jooonebug | 2,100 Kb |
P1 | Vivi_Lai | 1,533 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Modal Dialog | Gigaleet | 2,251 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!