Lego style loading text
How do I make an lego style loading text?
What is a lego style loading text? How do you make a lego style loading text? This script and codes were developed by John Urbank on 08 July 2022, Friday.
Lego style loading text Previews
Lego style loading text - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lego style loading text</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ * { margin: 0; padding: 0;
}
body { background: #afcbe9; width: 477px; margin: 0 auto; overflow: hidden;
}
.wrap { position: absolute; top: 40%; margin: 0 auto;
}
.wrap:after, .wrap:before { display: block; content: " "; height: 200px; width: 477px; background: #AFCBE9; position: absolute; z-index: 100; margin-left: 17px;
}
.wrap:before { top: -240px; border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.wrap:after { top: 100px; border-top: 1px solid rgba(255, 255, 255, 0.25);
}
h1 { visibility: hidden; font-size: 0em;
}
figure { float: left; margin-left: 17px;
}
figure.L { width: 34px; height: 66px;
}
figure.O { width: 51px; height: 66px;
}
figure.O .green + .green { left: 102px;
}
figure.A { width: 51px; height: 66px;
}
figure.A .red { left: 152px;
}
figure.D { width: 51px; height: 66px;
}
figure.D .green + .green { left: 238px;
}
figure.I { width: 51px; height: 66px; margin-left: 34px;
}
figure.I .green { left: 306px;
}
figure.N { width: 51px; height: 66px;
}
figure.N .yellow + .yellow { left: 391px;
}
figure.G { width: 51px; height: 66px;
}
figure.G .green + .green { left: 459px;
}
.block { position: absolute;
}
.block:before, .block:after { display: block; content: " "; width: 13px; height: 3px; position: absolute; top: -3px; left: 2px;
}
.one,
.two,
.three,
.four { height: 22px;
}
.one { width: 17px;
}
.two { width: 34px;
}
.two.red:before { box-shadow: 17px 0 #dd716a;
}
.two.green:before { box-shadow: 17px 0 #ADE6A6;
}
.two.yellow:before { box-shadow: 17px 0 #e4e7a0;
}
.three { width: 51px;
}
.three.red:before { box-shadow: 17px 0 0 #dd716a, 34px 0 #dd716a;
}
.three.green:before { box-shadow: 17px 0 0 #ADE6A6, 34px 0 #ADE6A6;
}
.three.yellow:before { box-shadow: 17px 0 0 #e4e7a0, 34px 0 #e4e7a0;
}
.red { background: #ff837a; z-index: 3;
}
.red:before { background: #dd716a;
}
.green { background: #b3f5aa; z-index: 2; top: 22px;
}
.green:before { background: #ADE6A6; z-index: 2;
}
.yellow { background: #f2f5aa; top: 44px;
}
.yellow:before { background: #e4e7a0; z-index: 1;
}
.red-id-1 { top: -211px; animation: anim-red-1 ease-in-out infinite alternate; animation-duration: 18s;
}
@keyframes anim-red-1 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-2 { top: -202px; animation: anim-red-2 ease-in-out infinite alternate; animation-duration: 9s;
}
@keyframes anim-red-2 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-3 { top: -193px; animation: anim-red-3 ease-in-out infinite alternate; animation-duration: 6s;
}
@keyframes anim-red-3 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-4 { top: -184px; animation: anim-red-4 ease-in-out infinite alternate; animation-duration: 4.5s;
}
@keyframes anim-red-4 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-5 { top: -175px; animation: anim-red-5 ease-in-out infinite alternate; animation-duration: 3.6s;
}
@keyframes anim-red-5 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-6 { top: -166px; animation: anim-red-6 ease-in-out infinite alternate; animation-duration: 3s;
}
@keyframes anim-red-6 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-7 { top: -157px; animation: anim-red-7 ease-in-out infinite alternate; animation-duration: 2.57143s;
}
@keyframes anim-red-7 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-8 { top: -148px; animation: anim-red-8 ease-in-out infinite alternate; animation-duration: 2.25s;
}
@keyframes anim-red-8 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-9 { top: -139px; animation: anim-red-9 ease-in-out infinite alternate; animation-duration: 2s;
}
@keyframes anim-red-9 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-10 { top: -130px; animation: anim-red-10 ease-in-out infinite alternate; animation-duration: 1.8s;
}
@keyframes anim-red-10 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-11 { top: -121px; animation: anim-red-11 ease-in-out infinite alternate; animation-duration: 1.63636s;
}
@keyframes anim-red-11 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-12 { top: -112px; animation: anim-red-12 ease-in-out infinite alternate; animation-duration: 1.5s;
}
@keyframes anim-red-12 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-13 { top: -103px; animation: anim-red-13 ease-in-out infinite alternate; animation-duration: 1.38462s;
}
@keyframes anim-red-13 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-14 { top: -94px; animation: anim-red-14 ease-in-out infinite alternate; animation-duration: 1.28571s;
}
@keyframes anim-red-14 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-15 { top: -85px; animation: anim-red-15 ease-in-out infinite alternate; animation-duration: 1.2s;
}
@keyframes anim-red-15 { 20% { top: 0px; } to { top: 0px; }
}
.yellow-id-1 { top: 109px; animation: anim-yellow-1 ease-in-out infinite alternate; animation-duration: 18s;
}
@keyframes anim-yellow-1 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-2 { top: 118px; animation: anim-yellow-2 ease-in-out infinite alternate; animation-duration: 9s;
}
@keyframes anim-yellow-2 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-3 { top: 127px; animation: anim-yellow-3 ease-in-out infinite alternate; animation-duration: 6s;
}
@keyframes anim-yellow-3 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-4 { top: 136px; animation: anim-yellow-4 ease-in-out infinite alternate; animation-duration: 4.5s;
}
@keyframes anim-yellow-4 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-5 { top: 145px; animation: anim-yellow-5 ease-in-out infinite alternate; animation-duration: 3.6s;
}
@keyframes anim-yellow-5 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-6 { top: 154px; animation: anim-yellow-6 ease-in-out infinite alternate; animation-duration: 3s;
}
@keyframes anim-yellow-6 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-7 { top: 163px; animation: anim-yellow-7 ease-in-out infinite alternate; animation-duration: 2.57143s;
}
@keyframes anim-yellow-7 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-8 { top: 172px; animation: anim-yellow-8 ease-in-out infinite alternate; animation-duration: 2.25s;
}
@keyframes anim-yellow-8 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-9 { top: 181px; animation: anim-yellow-9 ease-in-out infinite alternate; animation-duration: 2s;
}
@keyframes anim-yellow-9 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-10 { top: 190px; animation: anim-yellow-10 ease-in-out infinite alternate; animation-duration: 1.8s;
}
@keyframes anim-yellow-10 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-11 { top: 199px; animation: anim-yellow-11 ease-in-out infinite alternate; animation-duration: 1.63636s;
}
@keyframes anim-yellow-11 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-12 { top: 208px; animation: anim-yellow-12 ease-in-out infinite alternate; animation-duration: 1.5s;
}
@keyframes anim-yellow-12 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-13 { top: 217px; animation: anim-yellow-13 ease-in-out infinite alternate; animation-duration: 1.38462s;
}
@keyframes anim-yellow-13 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-14 { top: 226px; animation: anim-yellow-14 ease-in-out infinite alternate; animation-duration: 1.28571s;
}
@keyframes anim-yellow-14 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-15 { top: 235px; animation: anim-yellow-15 ease-in-out infinite alternate; animation-duration: 1.2s;
}
@keyframes anim-yellow-15 { 20% { top: 44px; } to { top: 44px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrap"> <h1>Loading...</h1> <!-- "L" --> <figure class="L"> <div class="red-id-1 block one red"></div> <div class="block one green"></div> <div class="yellow-id-1 block two yellow"></div> </figure> <!-- "O" --> <figure class="O"> <div class="red-id-2 block three red"></div> <div class="block one green"></div> <div class="block one green"></div> <div class="yellow-id-2 block three yellow"></div> </figure> <!-- "A" --> <figure class="A"> <div class="red-id-3 block one red"></div> <div class="block two green"></div> <div class="yellow-id-3 block three yellow"></div> </figure> <!-- "D" --> <figure class="D"> <div class="red-id-4 block three red"></div> <div class="block one green"></div> <div class="block two green"></div> <div class="yellow-id-4 block three yellow"></div> </figure> <!-- "I" --> <figure class="I"> <div class="red-id-5 block three red"></div> <div class="block one green"></div> <div class="yellow-id-5 block three yellow"></div> </figure> <!-- "N" --> <figure class="N"> <div class="red-id-6 block one red"></div> <div class="block three green"></div> <div class="yellow-id-6 block one yellow"></div> <div class="yellow-id-7 block one yellow"></div> </figure> <!-- "G" --> <figure class="G"> <div class="red-id-7 block two red"></div> <div class="block one green"></div> <div class="block two green"></div> <div class="yellow-id-9 block three yellow"></div> </figure>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Lego style loading text - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
body { background: #afcbe9; width: 477px; margin: 0 auto; overflow: hidden;
}
.wrap { position: absolute; top: 40%; margin: 0 auto;
}
.wrap:after, .wrap:before { display: block; content: " "; height: 200px; width: 477px; background: #AFCBE9; position: absolute; z-index: 100; margin-left: 17px;
}
.wrap:before { top: -240px; border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.wrap:after { top: 100px; border-top: 1px solid rgba(255, 255, 255, 0.25);
}
h1 { visibility: hidden; font-size: 0em;
}
figure { float: left; margin-left: 17px;
}
figure.L { width: 34px; height: 66px;
}
figure.O { width: 51px; height: 66px;
}
figure.O .green + .green { left: 102px;
}
figure.A { width: 51px; height: 66px;
}
figure.A .red { left: 152px;
}
figure.D { width: 51px; height: 66px;
}
figure.D .green + .green { left: 238px;
}
figure.I { width: 51px; height: 66px; margin-left: 34px;
}
figure.I .green { left: 306px;
}
figure.N { width: 51px; height: 66px;
}
figure.N .yellow + .yellow { left: 391px;
}
figure.G { width: 51px; height: 66px;
}
figure.G .green + .green { left: 459px;
}
.block { position: absolute;
}
.block:before, .block:after { display: block; content: " "; width: 13px; height: 3px; position: absolute; top: -3px; left: 2px;
}
.one,
.two,
.three,
.four { height: 22px;
}
.one { width: 17px;
}
.two { width: 34px;
}
.two.red:before { box-shadow: 17px 0 #dd716a;
}
.two.green:before { box-shadow: 17px 0 #ADE6A6;
}
.two.yellow:before { box-shadow: 17px 0 #e4e7a0;
}
.three { width: 51px;
}
.three.red:before { box-shadow: 17px 0 0 #dd716a, 34px 0 #dd716a;
}
.three.green:before { box-shadow: 17px 0 0 #ADE6A6, 34px 0 #ADE6A6;
}
.three.yellow:before { box-shadow: 17px 0 0 #e4e7a0, 34px 0 #e4e7a0;
}
.red { background: #ff837a; z-index: 3;
}
.red:before { background: #dd716a;
}
.green { background: #b3f5aa; z-index: 2; top: 22px;
}
.green:before { background: #ADE6A6; z-index: 2;
}
.yellow { background: #f2f5aa; top: 44px;
}
.yellow:before { background: #e4e7a0; z-index: 1;
}
.red-id-1 { top: -211px; animation: anim-red-1 ease-in-out infinite alternate; animation-duration: 18s;
}
@keyframes anim-red-1 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-2 { top: -202px; animation: anim-red-2 ease-in-out infinite alternate; animation-duration: 9s;
}
@keyframes anim-red-2 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-3 { top: -193px; animation: anim-red-3 ease-in-out infinite alternate; animation-duration: 6s;
}
@keyframes anim-red-3 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-4 { top: -184px; animation: anim-red-4 ease-in-out infinite alternate; animation-duration: 4.5s;
}
@keyframes anim-red-4 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-5 { top: -175px; animation: anim-red-5 ease-in-out infinite alternate; animation-duration: 3.6s;
}
@keyframes anim-red-5 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-6 { top: -166px; animation: anim-red-6 ease-in-out infinite alternate; animation-duration: 3s;
}
@keyframes anim-red-6 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-7 { top: -157px; animation: anim-red-7 ease-in-out infinite alternate; animation-duration: 2.57143s;
}
@keyframes anim-red-7 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-8 { top: -148px; animation: anim-red-8 ease-in-out infinite alternate; animation-duration: 2.25s;
}
@keyframes anim-red-8 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-9 { top: -139px; animation: anim-red-9 ease-in-out infinite alternate; animation-duration: 2s;
}
@keyframes anim-red-9 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-10 { top: -130px; animation: anim-red-10 ease-in-out infinite alternate; animation-duration: 1.8s;
}
@keyframes anim-red-10 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-11 { top: -121px; animation: anim-red-11 ease-in-out infinite alternate; animation-duration: 1.63636s;
}
@keyframes anim-red-11 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-12 { top: -112px; animation: anim-red-12 ease-in-out infinite alternate; animation-duration: 1.5s;
}
@keyframes anim-red-12 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-13 { top: -103px; animation: anim-red-13 ease-in-out infinite alternate; animation-duration: 1.38462s;
}
@keyframes anim-red-13 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-14 { top: -94px; animation: anim-red-14 ease-in-out infinite alternate; animation-duration: 1.28571s;
}
@keyframes anim-red-14 { 20% { top: 0px; } to { top: 0px; }
}
.red-id-15 { top: -85px; animation: anim-red-15 ease-in-out infinite alternate; animation-duration: 1.2s;
}
@keyframes anim-red-15 { 20% { top: 0px; } to { top: 0px; }
}
.yellow-id-1 { top: 109px; animation: anim-yellow-1 ease-in-out infinite alternate; animation-duration: 18s;
}
@keyframes anim-yellow-1 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-2 { top: 118px; animation: anim-yellow-2 ease-in-out infinite alternate; animation-duration: 9s;
}
@keyframes anim-yellow-2 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-3 { top: 127px; animation: anim-yellow-3 ease-in-out infinite alternate; animation-duration: 6s;
}
@keyframes anim-yellow-3 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-4 { top: 136px; animation: anim-yellow-4 ease-in-out infinite alternate; animation-duration: 4.5s;
}
@keyframes anim-yellow-4 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-5 { top: 145px; animation: anim-yellow-5 ease-in-out infinite alternate; animation-duration: 3.6s;
}
@keyframes anim-yellow-5 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-6 { top: 154px; animation: anim-yellow-6 ease-in-out infinite alternate; animation-duration: 3s;
}
@keyframes anim-yellow-6 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-7 { top: 163px; animation: anim-yellow-7 ease-in-out infinite alternate; animation-duration: 2.57143s;
}
@keyframes anim-yellow-7 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-8 { top: 172px; animation: anim-yellow-8 ease-in-out infinite alternate; animation-duration: 2.25s;
}
@keyframes anim-yellow-8 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-9 { top: 181px; animation: anim-yellow-9 ease-in-out infinite alternate; animation-duration: 2s;
}
@keyframes anim-yellow-9 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-10 { top: 190px; animation: anim-yellow-10 ease-in-out infinite alternate; animation-duration: 1.8s;
}
@keyframes anim-yellow-10 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-11 { top: 199px; animation: anim-yellow-11 ease-in-out infinite alternate; animation-duration: 1.63636s;
}
@keyframes anim-yellow-11 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-12 { top: 208px; animation: anim-yellow-12 ease-in-out infinite alternate; animation-duration: 1.5s;
}
@keyframes anim-yellow-12 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-13 { top: 217px; animation: anim-yellow-13 ease-in-out infinite alternate; animation-duration: 1.38462s;
}
@keyframes anim-yellow-13 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-14 { top: 226px; animation: anim-yellow-14 ease-in-out infinite alternate; animation-duration: 1.28571s;
}
@keyframes anim-yellow-14 { 20% { top: 44px; } to { top: 44px; }
}
.yellow-id-15 { top: 235px; animation: anim-yellow-15 ease-in-out infinite alternate; animation-duration: 1.2s;
}
@keyframes anim-yellow-15 { 20% { top: 44px; } to { top: 44px; }
}
| Developer | John Urbank |
| Username | jurbank |
| Uploaded | July 08, 2022 |
| Rating | 4 |
| Size | 5,209 Kb |
| Views | 44,528 |
Do you need developer help for Lego style loading text?
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!
John Urbank (jurbank) Script Codes
| Name | Size |
| Diagonal CSS Pattern | 1,790 Kb |
| Logo Slider | 3,508 Kb |
| CSS Loading Animation | 3,495 Kb |
| Navicon - responsive nav pattern | 3,469 Kb |
| Gutterless Feature Grid | 3,013 Kb |
| WebGL Minimalism | 2,940 Kb |
| CubeTronic | 3,716 Kb |
| Simple, CSS only, responsive menu | 2,615 Kb |
| Hamburger subtract | 2,767 Kb |
| Mouse Trailing | 3,268 Kb |
Create amazing video scripts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Materializecss input form | Jasonchan | 1,443 Kb |
| Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
| Slide out Menu | Rbiggs | 4,936 Kb |
| Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
| Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
| Tab panels | Accessibility | 0 Kb |
| Automatic scroll | Skeurentjes | 4,042 Kb |
| ASCII triangle image overlay | Mitchdot | 2,200 Kb |
| React JS Movie Info App | MTushar | 4,870 Kb |
| Canvas snow | Win7killer | 2,572 Kb |
Do you want hide your ip address?
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!