Travel Preloader
How do I make an travel preloader?
Travel themed preloader. What is a travel preloader? How do you make a travel preloader? This script and codes were developed by Matthew Nahmias on 27 December 2022, Tuesday.
Travel Preloader Previews
Travel Preloader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Travel 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="loader-box"> <div class="loader"> <div class="element-animation"> <img src="http://i57.tinypic.com/30dighv.png" width="480" height="100";> </div> </div> <ul class="labels"> <li class="label">Loading...</li> <li class="label">Wandering...</li> <li class="label">Thrillseeking...</li> <li class="label">Adventuring...</li> </ul>
</div>
</body>
</html>
Travel Preloader - Script Codes CSS Codes
body { text-align: center; background-color: #545454;
}
.loader-box { padding-top: 35vh; width: 100%; height: 100vh; margin: 0 auto; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: url(https://subtlepatterns.com/patterns/stardust.png); text-align: center; z-index: 11; opacity: 1; transition: all ease 1s;
}
.labels { list-style-type: none; margin: 0 auto; display: inline-block; padding: 0px; width: 200px; height: 30px; overflow: hidden;
}
.label { float: left; height: 30px; line-height: 30px; padding: 0px; font-family: Futura,Trebuchet MS,Arial,sans-serif; color: #fff; font-size: 20px; width: 200px; position: relative; animation: textUp ease 3s; animation-iteration-count: infinite; animation-fill-mode: forwards; -webkit-animation: textUp ease 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/ -moz-animation: textUp ease 3s; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; /*FF 5+*/ -o-animation: textUp ease 3s; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; /*Not implemented yet*/ -ms-animation: textUp ease 3s; -ms-animation-iteration-count: infinite; -ms-animation-fill-mode: forwards; /*IE 10+*/
}
.loader { width: 120px; height: 120px; background-color: #FFFFFF; overflow: hidden; display: block; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; border: 3px solid #fff; position: relative; margin: 15px auto; z-index: 1; animation: colorChange ease 3s; animation-iteration-count: infinite; animation-fill-mode: forwards; -webkit-animation: colorChange ease 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/ -moz-animation: colorChange ease 3s; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; /*FF 5+*/ -o-animation: colorChange ease 3s; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; /*Not implemented yet*/ -ms-animation: colorChange ease 3s; -ms-animation-iteration-count: infinite; -ms-animation-fill-mode: forwards; /*IE 10+*/
}
.loaded.loader-box, .loaded .loader, .loaded .labels { opacity: 0;
}
.hidden { display: none;
}
.element-animation { bottom: 10px; animation: animationFrames ease-in 3s; animation-iteration-count: infinite; animation-fill-mode: forwards; -webkit-animation: animationFrames ease-in 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; /*Chrome 16+, Safari 4+*/ -moz-animation: animationFrames ease-in 3s; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; /*FF 5+*/ -o-animation: animationFrames ease-in 3s; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; /*Not implemented yet*/ -ms-animation: animationFrames ease-in 3s; -ms-animation-iteration-count: infinite; -ms-animation-fill-mode: forwards; /*IE 10+*/
}
.element-animation img { bottom: 5px; position: relative; right: 3px;
}
@keyframes textUp { 0% { top: 0px; display: relative; opacity: 0; } 1% { top: 0px; display: relative; opacity: 1; } 24% { top: 0px; display: relative; opacity: 1; } 25% { top: 0px; display: none; opacity: 0; } 26% { top: -30px; display: relative; opacity: 0; } 27% { top: -30px; display: relative; opacity: 1; } 49% { top: -30px; display: relative; opacity: 1; } 50% { top: -30px; display: none; opacity: 0; } 51% { top: -60px; display: relative; opacity: 0; } 52% { top: -60px; display: relative; opacity: 1; } 74% { top: -60px; display: relative; opacity: 1; } 75% { top: -60px; display: none; opacity: 0; } 76% { top: -90px; display: relative; opacity: 0; } 77% { top: -90px; display: relative; opacity: 1; } 99% { top: -90px; display: relative; opacity: 1; } 100% { top: -90px; display: none; opacity: 0; }
}
@-webkit-keyframes textUp { 0% { top: 0px; display: relative; opacity: 0; } 1% { top: 0px; display: relative; opacity: 1; } 24% { top: 0px; display: relative; opacity: 1; } 25% { top: 0px; display: none; opacity: 0; } 26% { top: -30px; display: relative; opacity: 0; } 27% { top: -30px; display: relative; opacity: 1; } 49% { top: -30px; display: relative; opacity: 1; } 50% { top: -30px; display: none; opacity: 0; } 51% { top: -60px; display: relative; opacity: 0; } 52% { top: -60px; display: relative; opacity: 1; } 74% { top: -60px; display: relative; opacity: 1; } 75% { top: -60px; display: none; opacity: 0; } 76% { top: -90px; display: relative; opacity: 0; } 77% { top: -90px; display: relative; opacity: 1; } 99% { top: -90px; display: relative; opacity: 1; } 100% { top: -90px; display: none; opacity: 0; }
}
@-moz-keyframes textUp { 0% { top: 0px; display: relative; opacity: 0; } 1% { top: 0px; display: relative; opacity: 1; } 24% { top: 0px; display: relative; opacity: 1; } 25% { top: 0px; display: none; opacity: 0; } 26% { top: -30px; display: relative; opacity: 0; } 27% { top: -30px; display: relative; opacity: 1; } 49% { top: -30px; display: relative; opacity: 1; } 50% { top: -30px; display: none; opacity: 0; } 51% { top: -60px; display: relative; opacity: 0; } 52% { top: -60px; display: relative; opacity: 1; } 74% { top: -60px; display: relative; opacity: 1; } 75% { top: -60px; display: none; opacity: 0; } 76% { top: -90px; display: relative; opacity: 0; } 77% { top: -90px; display: relative; opacity: 1; } 99% { top: -90px; display: relative; opacity: 1; } 100% { top: -90px; display: none; opacity: 0; }
}
@-o-keyframes textUp { 0% { top: 0px; display: relative; opacity: 0; } 1% { top: 0px; display: relative; opacity: 1; } 24% { top: 0px; display: relative; opacity: 1; } 25% { top: 0px; display: none; opacity: 0; } 26% { top: -30px; display: relative; opacity: 0; } 27% { top: -30px; display: relative; opacity: 1; } 49% { top: -30px; display: relative; opacity: 1; } 50% { top: -30px; display: none; opacity: 0; } 51% { top: -60px; display: relative; opacity: 0; } 52% { top: -60px; display: relative; opacity: 1; } 74% { top: -60px; display: relative; opacity: 1; } 75% { top: -60px; display: none; opacity: 0; } 76% { top: -90px; display: relative; opacity: 0; } 77% { top: -90px; display: relative; opacity: 1; } 99% { top: -90px; display: relative; opacity: 1; } 100% { top: -90px; display: none; opacity: 0; }
}
@-ms-keyframes textUp { 0% { top: 0px; display: relative; opacity: 0; } 1% { top: 0px; display: relative; opacity: 1; } 24% { top: 0px; display: relative; opacity: 1; } 25% { top: 0px; display: none; opacity: 0; } 26% { top: -30px; display: relative; opacity: 0; } 27% { top: -30px; display: relative; opacity: 1; } 49% { top: -30px; display: relative; opacity: 1; } 50% { top: -30px; display: none; opacity: 0; } 51% { top: -60px; display: relative; opacity: 0; } 52% { top: -60px; display: relative; opacity: 1; } 74% { top: -60px; display: relative; opacity: 1; } 75% { top: -60px; display: none; opacity: 0; } 76% { top: -90px; display: relative; opacity: 0; } 77% { top: -90px; display: relative; opacity: 1; } 99% { top: -90px; display: relative; opacity: 1; } 100% { top: -90px; display: none; opacity: 0; }
}
@keyframes colorChange { 0% { background-color: #ef5350; } 25% { background-color: #ef5350; } 26% { background-color: #4F759B; } 50% { background-color: #4F759B; } 51% { background-color: #55896F; } 75% { background-color: #55896F; } 76% { background-color: #FDA543; } 100% { background-color: #FDA543; }
}
@-webkit-keyframes colorChange { 0% { background-color: #ef5350; } 25% { background-color: #ef5350; } 26% { background-color: #4F759B; } 50% { background-color: #4F759B; } 51% { background-color: #55896F; } 75% { background-color: #55896F; } 76% { background-color: #FDA543; } 100% { background-color: #FDA543; }
}
@-moz-keyframes colorChange { 0% { background-color: #ef5350; } 25% { background-color: #ef5350; } 26% { background-color: #4F759B; } 50% { background-color: #4F759B; } 51% { background-color: #55896F; } 75% { background-color: #55896F; } 76% { background-color: #FDA543; } 100% { background-color: #FDA543; }
}
@-o-keyframes colorChange { 0% { background-color: #ef5350; } 25% { background-color: #ef5350; } 26% { background-color: #4F759B; } 50% { background-color: #4F759B; } 51% { background-color: #55896F; } 75% { background-color: #55896F; } 76% { background-color: #FDA543; } 100% { background-color: #FDA543; }
}
@-ms-keyframes colorChange { 0% { background-color: #ef5350; } 25% { background-color: #ef5350; } 26% { background-color: #4F759B; } 50% { background-color: #4F759B; } 51% { background-color: #55896F; } 75% { background-color: #55896F; } 76% { background-color: #FDA543; } 100% { background-color: #FDA543; }
}
@keyframes animationFrames { 0% { transform: translate(-360px, 15px); opacity: 0; } 1% { transform: translate(-360px, 15px); opacity: 1; } 24% { transform: translate(-360px, 15px); opacity: 1; } 25% { transform: translate(-360px, 15px); opacity: 0; } 26% { transform: translate(-240px, 15px); opacity: 0; } 27% { transform: translate(-240px, 15px); opacity: 1; } 49% { transform: translate(-240px, 15px); opacity: 1; } 50% { transform: translate(-240px, 15px); opacity: 0; } 51% { transform: translate(-120px, 15px); opacity: 0; } 52% { transform: translate(-120px, 15px); opacity: 1; } 74% { transform: translate(-120px, 15px); opacity: 1; } 75% { transform: translate(-120px, 15px); opacity: 0; } 76% { transform: translate(0px, 15px); opacity: 0; } 77% { transform: translate(0px, 15px); opacity: 1; } 99% { transform: translate(0px, 15px); opacity: 1; } 100% { transform: translate(0px, 15px); opacity: 0; }
}
@-moz-keyframes animationFrames { 0% { transform: translate(-480px, 15px); } 20% { transform: translate(-480px, 15px); } 21% { transform: translate(-360px, 15px); } 40% { transform: translate(-360px, 15px); } 41% { transform: translate(-240px, 15px); } 60% { transform: translate(-240px, 15px); } 61% { transform: translate(-120px, 15px); } 80% { transform: translate(-120px, 15px); } 81% { transform: translate(0px, 15px); } 100% { transform: translate(0px, 15px); }
}
@-webkit-keyframes animationFrames { 0% { transform: translate(-360px, 15px); opacity: 0; } 1% { transform: translate(-360px, 15px); opacity: 1; } 24% { transform: translate(-360px, 15px); opacity: 1; } 25% { transform: translate(-360px, 15px); opacity: 0; } 26% { transform: translate(-240px, 15px); opacity: 0; } 27% { transform: translate(-240px, 15px); opacity: 1; } 49% { transform: translate(-240px, 15px); opacity: 1; } 50% { transform: translate(-240px, 15px); opacity: 0; } 51% { transform: translate(-120px, 15px); opacity: 0; } 52% { transform: translate(-120px, 15px); opacity: 1; } 74% { transform: translate(-120px, 15px); opacity: 1; } 75% { transform: translate(-120px, 15px); opacity: 0; } 76% { transform: translate(0px, 15px); opacity: 0; } 77% { transform: translate(0px, 15px); opacity: 1; } 99% { transform: translate(0px, 15px); opacity: 1; } 100% { transform: translate(0px, 15px); opacity: 0; }
}
@-o-keyframes animationFrames { 0% { transform: translate(-360px, 15px); opacity: 0; } 1% { transform: translate(-360px, 15px); opacity: 1; } 24% { transform: translate(-360px, 15px); opacity: 1; } 25% { transform: translate(-360px, 15px); opacity: 0; } 26% { transform: translate(-240px, 15px); opacity: 0; } 27% { transform: translate(-240px, 15px); opacity: 1; } 49% { transform: translate(-240px, 15px); opacity: 1; } 50% { transform: translate(-240px, 15px); opacity: 0; } 51% { transform: translate(-120px, 15px); opacity: 0; } 52% { transform: translate(-120px, 15px); opacity: 1; } 74% { transform: translate(-120px, 15px); opacity: 1; } 75% { transform: translate(-120px, 15px); opacity: 0; } 76% { transform: translate(0px, 15px); opacity: 0; } 77% { transform: translate(0px, 15px); opacity: 1; } 99% { transform: translate(0px, 15px); opacity: 1; } 100% { transform: translate(0px, 15px); opacity: 0; }
}
@-ms-keyframes animationFrames { 0% { transform: translate(-360px, 15px); opacity: 0; } 1% { transform: translate(-360px, 15px); opacity: 1; } 24% { transform: translate(-360px, 15px); opacity: 1; } 25% { transform: translate(-360px, 15px); opacity: 0; } 26% { transform: translate(-240px, 15px); opacity: 0; } 27% { transform: translate(-240px, 15px); opacity: 1; } 49% { transform: translate(-240px, 15px); opacity: 1; } 50% { transform: translate(-240px, 15px); opacity: 0; } 51% { transform: translate(-120px, 15px); opacity: 0; } 52% { transform: translate(-120px, 15px); opacity: 1; } 74% { transform: translate(-120px, 15px); opacity: 1; } 75% { transform: translate(-120px, 15px); opacity: 0; } 76% { transform: translate(0px, 15px); opacity: 0; } 77% { transform: translate(0px, 15px); opacity: 1; } 99% { transform: translate(0px, 15px); opacity: 1; } 100% { transform: translate(0px, 15px); opacity: 0; }
}
| Developer | Matthew Nahmias |
| Username | mnahmias |
| Uploaded | December 27, 2022 |
| Rating | 4 |
| Size | 4,014 Kb |
| Views | 14,168 |
Do you need developer help for Travel 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!
Matthew Nahmias (mnahmias) Script Codes
| Name | Size |
| Hover Cards | 4,545 Kb |
| Light Switch - Exercise | 2,365 Kb |
| Content Replacement - Exercise | 1,828 Kb |
| Space Pen | 5,202 Kb |
| Click Event - Exercise | 1,953 Kb |
| Content Replacement - Solution | 1,935 Kb |
| Bus Animation | 5,854 Kb |
| Array Manipulation Example | 2,007 Kb |
| A Pen by Matthew Nahmias | 4,649 Kb |
| Array challenge | 2,123 Kb |
Create amazing blog posts 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 |
| Slider | Mohammed-fawzy | 2,634 Kb |
| A Pen by Jay | Jaycode | 3,784 Kb |
| HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
| Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
| Countdown with Rings | Ewganoel | 2,490 Kb |
| A Pen by tugce | Ecgutcnkr | 4,197 Kb |
| CSS Colors | Alexpate | 2,232 Kb |
| Tic Tac Toe | Volv | 4,862 Kb |
| HexMaze | Cantelope | 4,825 Kb |
| Sketchy Box | Mnicpt | 3,033 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!