Wedding loader
How do I make an wedding loader?
Just my wedding coming soon.. What is a wedding loader? How do you make a wedding loader? This script and codes were developed by Tiberiu Raducea on 25 September 2022, Sunday.
Wedding loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wedding loader</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! */ * { margin:0;
}
.content { width: 100%; height: 100%;
}
body, html { overflow: hidden; margin:0; color: #fffff0; background: #333; font-family: 'Tangerine', cursive;
}
.rings { position: absolute; top: 1%; left:50%; height:16em; width:28em; margin-left:-14em; background-image: url(http://almacog.org/wp-content/uploads/2012/01/weddingrings1.png); background-size: 80% auto; background-repeat: no-repeat;
}
.we-are { line-height:10px; font-size:5em; font-weight: 400; position:absolute; width:100%; text-align:center; top:5em;
}
.we-are em { color: #FCBB42; line-height:1px;
}
.title { color:#FCBB42; position: absolute; top:15em; margin:0 auto; width:100%; text-align:center;
}
.loader { background: #fffff0; border: 2px solid #FCBB42; position: absolute; margin-left: 1em; margin-right: 1em; width: 97%; height: 3em; margin-top:20em;
}
.loading { overflow:hidden; width:1%; height:100%; -webkit-animation: tb-load 50s; animation: tb-load 50s;
}
.list { position: relative; left:25%; -webkit-animation: numbers 40s; animation: numbers 40s;
}
.list li { color: #333; float:left; display: block; width:20%; font-size:1.4em; list-style: none;
}
.loading-text { color:#4FC1E9; width:500%; text-align:center; position: absolute; top:2px; font-weight:300; font-size:2em;
}
@-webkit-keyframes tb-load { 1% { width:1%;background:#FFCE54;} 100% {width:100%;background: #FCBB42;}
}
@keyframes tb-load { 1% { width:1%;background:#FFCE54;} 100% {width:100%;background: #FCBB42;}
}
@-webkit-keyframes numbers { 1% { left:0%; } 20% { left:-20%; } 40% { left:-40%; } 60% { left:-60%; } 80% { left:-80%; } 100% { left:-100%; }
}
@keyframes numbers { 1% { left:0%; } 20% { left:-20%; } 40% { left:-40%; } 60% { left:-60%; } 80% { left:-80%; } 100% { left:-100%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="content"> <div class="rings"> </div> <div class="title"> <h1>Our Wedding loading...</h1> </div> <div class="loader"> <div class="loading"> </div> <div class="loading-text"> <ul class="list"> <li>H.Samuel engagement ring</li> <li>OK Ballroom Restaurant</li> <li>Niculina Stoican</li> <li>Issa Marriage</li> <li>FotoVideoIrinel</li> </ul> </div> </div> <div class="we-are"> <h1>Tiberiu & Aurelia</h1> <em>30 August 2014</em> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Wedding loader - Script Codes CSS Codes
* { margin:0;
}
.content { width: 100%; height: 100%;
}
body, html { overflow: hidden; margin:0; color: #fffff0; background: #333; font-family: 'Tangerine', cursive;
}
.rings { position: absolute; top: 1%; left:50%; height:16em; width:28em; margin-left:-14em; background-image: url(http://almacog.org/wp-content/uploads/2012/01/weddingrings1.png); background-size: 80% auto; background-repeat: no-repeat;
}
.we-are { line-height:10px; font-size:5em; font-weight: 400; position:absolute; width:100%; text-align:center; top:5em;
}
.we-are em { color: #FCBB42; line-height:1px;
}
.title { color:#FCBB42; position: absolute; top:15em; margin:0 auto; width:100%; text-align:center;
}
.loader { background: #fffff0; border: 2px solid #FCBB42; position: absolute; margin-left: 1em; margin-right: 1em; width: 97%; height: 3em; margin-top:20em;
}
.loading { overflow:hidden; width:1%; height:100%; -webkit-animation: tb-load 50s; animation: tb-load 50s;
}
.list { position: relative; left:25%; -webkit-animation: numbers 40s; animation: numbers 40s;
}
.list li { color: #333; float:left; display: block; width:20%; font-size:1.4em; list-style: none;
}
.loading-text { color:#4FC1E9; width:500%; text-align:center; position: absolute; top:2px; font-weight:300; font-size:2em;
}
@-webkit-keyframes tb-load { 1% { width:1%;background:#FFCE54;} 100% {width:100%;background: #FCBB42;}
}
@keyframes tb-load { 1% { width:1%;background:#FFCE54;} 100% {width:100%;background: #FCBB42;}
}
@-webkit-keyframes numbers { 1% { left:0%; } 20% { left:-20%; } 40% { left:-40%; } 60% { left:-60%; } 80% { left:-80%; } 100% { left:-100%; }
}
@keyframes numbers { 1% { left:0%; } 20% { left:-20%; } 40% { left:-40%; } 60% { left:-60%; } 80% { left:-80%; } 100% { left:-100%; }
}
Wedding loader - Script Codes JS Codes
WebFontConfig = { google: { families: [ 'Tangerine::latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })();
Developer | Tiberiu Raducea |
Username | tyberiu88 |
Uploaded | September 25, 2022 |
Rating | 3 |
Size | 3,401 Kb |
Views | 46,552 |
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 |
A Pen by Tiberiu Raducea | 9,212 Kb |
Sonar profile pic | 4,370 Kb |
Slider with Navigation slider - slick | 3,324 Kb |
Option toggle CSS only | 2,758 Kb |
Sticky button bottom header | 2,802 Kb |
Fancy title | 2,196 Kb |
Radar pulse | 1,654 Kb |
Funky Scroll up and down | 2,553 Kb |
Under Maintenance | 1,864 Kb |
Cookie policy Sass options | 3,167 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 |
Simple blog concept | Drew_mc | 2,666 Kb |
Guidepopup | Wooljs | 3,747 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Flex Table | Simeonoff | 4,059 Kb |
Tiling Subdivision | Francext | 3,937 Kb |
Typefaces with descriptions | Megandoty | 2,944 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 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!