Tacklebox Preloader
How do I make an tacklebox preloader?
T-Box. What is a tacklebox preloader? How do you make a tacklebox preloader? This script and codes were developed by Michael Hobizal on 05 January 2023, Thursday.
Tacklebox Preloader Previews
Tacklebox Preloader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tacklebox Preloader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container'> <div class='cube'> <div class='half1'> <div class='side s2'></div> <div class='side s5'></div> <div class='side s6'></div> </div> <div class='half2'> <div class='side s3'></div> <div class='side s4'></div> </div> </div>
</div>
</body>
</html>
Tacklebox Preloader - Script Codes CSS Codes
body { background: #123; color: white;
}
.cube, .half1, .half2, .container { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;
}
.container { position: relative; width: 100px; height: 100px; margin: 100px auto 0; -webkit-perspective: 300px; -moz-perspective: 300px; perspective: 300px;
}
.cube { width: 100px; height: 100px; -webkit-transform-origin: center 50px; -moz-transform-origin: center 50px; -ms-transform-origin: center 50px; -o-transform-origin: center 50px; transform-origin: center 50px; -webkit-animation: cube 2500ms ease-in-out infinite alternate; -moz-animation: cube 2500ms ease-in-out infinite alternate; animation: cube 2500ms ease-in-out infinite alternate;
}
.half1 { height: 40px; top: 0; position: absolute; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: ha 2500ms ease-in-out infinite alternate; -moz-animation: ha 2500ms ease-in-out infinite alternate; animation: ha 2500ms ease-in-out infinite alternate;
}
.side { width: 20px; height: 20px; background: white; position: absolute;
}
.s2 { top: 20px; left: 40px; -webkit-animation: s2a 2500ms ease-in-out infinite alternate; -moz-animation: s2a 2500ms ease-in-out infinite alternate; animation: s2a 2500ms ease-in-out infinite alternate; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%;
}
.s3 { top: 40px; left: 40px; -webkit-animation: s3a 2500ms ease-in-out infinite alternate; -moz-animation: s3a 2500ms ease-in-out infinite alternate; animation: s3a 2500ms ease-in-out infinite alternate; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%;
}
.s4 { top: 60px; left: 40px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: s4a 2500ms ease-in-out infinite alternate; -moz-animation: s4a 2500ms ease-in-out infinite alternate; animation: s4a 2500ms ease-in-out infinite alternate;
}
.s5 { left: 20px; top: 20px; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: s5a 2500ms ease-in-out infinite alternate; -moz-animation: s5a 2500ms ease-in-out infinite alternate; animation: s5a 2500ms ease-in-out infinite alternate;
}
.s6 { left: 60px; top: 20px; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: s6a 2500ms ease-in-out infinite alternate; -moz-animation: s6a 2500ms ease-in-out infinite alternate; animation: s6a 2500ms ease-in-out infinite alternate;
}
@-webkit-keyframes s2a { 0% { background-color: white; } 30% { background-color: white; } 70% { background-color: #999999; } 100% { background-color: #999999; }
}
@-moz-keyframes s2a { 0% { background-color: white; } 30% { background-color: white; } 70% { background-color: #999999; } 100% { background-color: #999999; }
}
@keyframes s2a { 0% { background-color: white; } 30% { background-color: white; } 70% { background-color: #999999; } 100% { background-color: #999999; }
}
@-webkit-keyframes s3a { 0% { background-color: white; } 30% { background-color: white; } 70% { background-color: #4d4d4d; } 100% { background-color: #4d4d4d; }
}
@-moz-keyframes s3a { 0% { background-color: white; } 30% { background-color: white; } 70% { background-color: #4d4d4d; } 100% { background-color: #4d4d4d; }
}
@keyframes s3a { 0% { background-color: white; } 30% { background-color: white; } 70% { background-color: #4d4d4d; } 100% { background-color: #4d4d4d; }
}
@-webkit-keyframes s4a { 0% { background-color: white; -webkit-transform: rotateX(0deg); } 30% { background-color: white; -webkit-transform: rotateX(0deg); } 70% { background-color: #cccccc; -webkit-transform: rotateX(90deg); } 100% { background-color: #cccccc; -webkit-transform: rotateX(90deg); }
}
@-moz-keyframes s4a { 0% { background-color: white; -moz-transform: rotateX(0deg); } 30% { background-color: white; -moz-transform: rotateX(0deg); } 70% { background-color: #cccccc; -moz-transform: rotateX(90deg); } 100% { background-color: #cccccc; -moz-transform: rotateX(90deg); }
}
@keyframes s4a { 0% { background-color: white; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { background-color: white; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 70% { background-color: #cccccc; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); } 100% { background-color: #cccccc; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); }
}
@-webkit-keyframes s5a { 0% { background-color: white; -webkit-transform: rotateX(0deg); } 30% { background-color: white; -webkit-transform: rotateX(0deg); } 70% { background-color: #b3b3b3; -webkit-transform: rotateY(90deg); } 100% { background-color: #b3b3b3; -webkit-transform: rotateY(90deg); }
}
@-moz-keyframes s5a { 0% { background-color: white; -moz-transform: rotateX(0deg); } 30% { background-color: white; -moz-transform: rotateX(0deg); } 70% { background-color: #b3b3b3; -moz-transform: rotateY(90deg); } 100% { background-color: #b3b3b3; -moz-transform: rotateY(90deg); }
}
@keyframes s5a { 0% { background-color: white; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { background-color: white; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 70% { background-color: #b3b3b3; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } 100% { background-color: #b3b3b3; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); }
}
@-webkit-keyframes s6a { 0% { background-color: white; -webkit-transform: rotateX(0deg); } 30% { background-color: white; -webkit-transform: rotateX(0deg); } 70% { -webkit-transform: rotateY(-90deg); } 100% { -webkit-transform: rotateY(-90deg); }
}
@-moz-keyframes s6a { 0% { background-color: white; -moz-transform: rotateX(0deg); } 30% { background-color: white; -moz-transform: rotateX(0deg); } 70% { -moz-transform: rotateY(-90deg); } 100% { -moz-transform: rotateY(-90deg); }
}
@keyframes s6a { 0% { background-color: white; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { background-color: white; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 70% { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 100% { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); }
}
@-webkit-keyframes ha { 0% { -webkit-transform: rotateX(0deg); } 30% { -webkit-transform: rotateX(0deg); } 70% { -webkit-transform: rotateX(-90deg); } 100% { -webkit-transform: rotateX(-90deg); }
}
@-moz-keyframes ha { 0% { -moz-transform: rotateX(0deg); } 30% { -moz-transform: rotateX(0deg); } 70% { -moz-transform: rotateX(-90deg); } 100% { -moz-transform: rotateX(-90deg); }
}
@keyframes ha { 0% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 30% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 70% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } 100% { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); }
}
@-webkit-keyframes cube { 0% { -webkit-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); } 20% { -webkit-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); } 70% { -webkit-transform: rotateX(420deg) rotateZ(45deg) scale(1); } 100% { -webkit-transform: rotateX(420deg) rotateZ(45deg) scale(1); }
}
@-moz-keyframes cube { 0% { -moz-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); } 20% { -moz-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); } 70% { -moz-transform: rotateX(420deg) rotateZ(45deg) scale(1); } 100% { -moz-transform: rotateX(420deg) rotateZ(45deg) scale(1); }
}
@keyframes cube { 0% { -webkit-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); -moz-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); -ms-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); -o-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); transform: rotateX(0deg) rotateZ(0deg) scale(0.7); } 20% { -webkit-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); -moz-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); -ms-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); -o-transform: rotateX(0deg) rotateZ(0deg) scale(0.7); transform: rotateX(0deg) rotateZ(0deg) scale(0.7); } 70% { -webkit-transform: rotateX(420deg) rotateZ(45deg) scale(1); -moz-transform: rotateX(420deg) rotateZ(45deg) scale(1); -ms-transform: rotateX(420deg) rotateZ(45deg) scale(1); -o-transform: rotateX(420deg) rotateZ(45deg) scale(1); transform: rotateX(420deg) rotateZ(45deg) scale(1); } 100% { -webkit-transform: rotateX(420deg) rotateZ(45deg) scale(1); -moz-transform: rotateX(420deg) rotateZ(45deg) scale(1); -ms-transform: rotateX(420deg) rotateZ(45deg) scale(1); -o-transform: rotateX(420deg) rotateZ(45deg) scale(1); transform: rotateX(420deg) rotateZ(45deg) scale(1); }
}
| Developer | Michael Hobizal |
| Username | mikehobizal |
| Uploaded | January 05, 2023 |
| Rating | 4 |
| Size | 3,273 Kb |
| Views | 6,072 |
Do you need developer help for Tacklebox Preloader?
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!
Michael Hobizal (mikehobizal) Script Codes
| Name | Size |
| CSS Ellipses Animation | 2,733 Kb |
| Cube Fold - CSS Animated Preloader | 4,808 Kb |
| Cube Sides Spinner | 3,421 Kb |
| Happy Holidays CSS | 19,478 Kb |
| Circular Circle Circling | 5,471 Kb |
| Wave Lines | 4,023 Kb |
| Wireframe Cube | 3,818 Kb |
| CSS Triangle Image Crop | 3,036 Kb |
| Chaos | 12,607 Kb |
| Jellyfish | 4,178 Kb |
Create amazing SEO content 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 |
| Sticky div | Kaslab | 2,225 Kb |
| 12 DAYS OF XMAS | Proto78 | 2,313 Kb |
| Calendar | Miroot | 2,033 Kb |
| Video Player Custom Controls | EleftheriaBatsou | 3,665 Kb |
| Pagepilling.js | Blossk | 6,554 Kb |
| Countdown Timer | Massiebn | 3,001 Kb |
| Base64 SVG Me | MrBambule | 44,786 Kb |
| Vue.js Starter | Andymerskin | 1,268 Kb |
| Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
| Hello People | Danburrows | 2,365 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!