More loading
How do I make an more loading?
What is a more loading? How do you make a more loading? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.
More loading - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>more loading</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ * { box-sizing: border-box;
}
body { background: linear-gradient(-10deg, #ff1493, #1e90ff); min-height: 100vh;
}
.loader { height: 60px; left: 50%; position: fixed; top: 50%; transform: translateX(-50%) translateY(-50%); width: 60px;
}
.loader span { animation: load 4s ease-in-out infinite; background: white; display: block; height: 12px; opacity: 0; position: absolute; width: 12px;
}
.loader span.block-1 { animation-delay: 0.92s; left: 0px; top: 0px;
}
.loader span.block-2 { animation-delay: 0.84s; left: 16px; top: 0px;
}
.loader span.block-3 { animation-delay: 0.76s; left: 32px; top: 0px;
}
.loader span.block-4 { animation-delay: 0.68s; left: 48px; top: 0px;
}
.loader span.block-5 { animation-delay: 0.6s; left: 0px; top: 16px;
}
.loader span.block-6 { animation-delay: 0.52s; left: 16px; top: 16px;
}
.loader span.block-7 { animation-delay: 0.44s; left: 32px; top: 16px;
}
.loader span.block-8 { animation-delay: 0.36s; left: 48px; top: 16px;
}
.loader span.block-9 { animation-delay: 0.28s; left: 0px; top: 32px;
}
.loader span.block-10 { animation-delay: 0.2s; left: 16px; top: 32px;
}
.loader span.block-11 { animation-delay: 0.12s; left: 32px; top: 32px;
}
.loader span.block-12 { animation-delay: 0.04s; left: 48px; top: 32px;
}
.loader span.block-13 { animation-delay: -0.04s; left: 0px; top: 48px;
}
.loader span.block-14 { animation-delay: -0.12s; left: 16px; top: 48px;
}
.loader span.block-15 { animation-delay: -0.2s; left: 32px; top: 48px;
}
.loader span.block-16 { animation-delay: -0.28s; left: 48px; top: 48px;
}
@keyframes load { 0% { opacity: 0; transform: translateY(-100px); } 15% { opacity: 0; transform: translateY(-100px); } 30% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(0); } 85% { opacity: 0; transform: translateY(100px); } 100% { opacity: 0; transform: translateY(100px); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="loader"></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>
More loading - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { background: linear-gradient(-10deg, #ff1493, #1e90ff); min-height: 100vh;
}
.loader { height: 60px; left: 50%; position: fixed; top: 50%; transform: translateX(-50%) translateY(-50%); width: 60px;
}
.loader span { animation: load 4s ease-in-out infinite; background: white; display: block; height: 12px; opacity: 0; position: absolute; width: 12px;
}
.loader span.block-1 { animation-delay: 0.92s; left: 0px; top: 0px;
}
.loader span.block-2 { animation-delay: 0.84s; left: 16px; top: 0px;
}
.loader span.block-3 { animation-delay: 0.76s; left: 32px; top: 0px;
}
.loader span.block-4 { animation-delay: 0.68s; left: 48px; top: 0px;
}
.loader span.block-5 { animation-delay: 0.6s; left: 0px; top: 16px;
}
.loader span.block-6 { animation-delay: 0.52s; left: 16px; top: 16px;
}
.loader span.block-7 { animation-delay: 0.44s; left: 32px; top: 16px;
}
.loader span.block-8 { animation-delay: 0.36s; left: 48px; top: 16px;
}
.loader span.block-9 { animation-delay: 0.28s; left: 0px; top: 32px;
}
.loader span.block-10 { animation-delay: 0.2s; left: 16px; top: 32px;
}
.loader span.block-11 { animation-delay: 0.12s; left: 32px; top: 32px;
}
.loader span.block-12 { animation-delay: 0.04s; left: 48px; top: 32px;
}
.loader span.block-13 { animation-delay: -0.04s; left: 0px; top: 48px;
}
.loader span.block-14 { animation-delay: -0.12s; left: 16px; top: 48px;
}
.loader span.block-15 { animation-delay: -0.2s; left: 32px; top: 48px;
}
.loader span.block-16 { animation-delay: -0.28s; left: 48px; top: 48px;
}
@keyframes load { 0% { opacity: 0; transform: translateY(-100px); } 15% { opacity: 0; transform: translateY(-100px); } 30% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(0); } 85% { opacity: 0; transform: translateY(100px); } 100% { opacity: 0; transform: translateY(100px); }
}
More loading - Script Codes JS Codes
for (var i = 1; i <= 16; i++) { $('div.loader').append('<span class="block-' + i + '"></span>');
}
Developer | Brandon Kennedy |
Username | brandonkennedy |
Uploaded | September 18, 2022 |
Rating | 4.5 |
Size | 3,383 Kb |
Views | 26,312 |
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 |
CSS Animated Search Box Concepts | 7,072 Kb |
BG Images WITHOUT Defining Them In CSS | 5,580 Kb |
Digital Static Search Box | 4,148 Kb |
Scrolling helix | 3,776 Kb |
3D 2D Box-Shadow Fish | 6,333 Kb |
Lazyload.js | 4,007 Kb |
Button disabled and loading states | 3,677 Kb |
Change the Slide Behavior on Bootstrap Carousels | 5,015 Kb |
Box-shadow loader | 2,834 Kb |
Space ship fun | 7,302 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 |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Drill-down Map | Good886 | 8,484 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Resize image | Happyhj | 1,892 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!