Batman loader
How do I make an batman loader?
Based on Filip Chudzinski's work on Dribbble : http://dribbble.com/shots/111083--Envisioning-Detail-of-the-UI. What is a batman loader? How do you make a batman loader? This script and codes were developed by Hugo Giraudel on 09 August 2022, Tuesday.
Batman loader Previews
Batman loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Batman loader</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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: #333 url(/images/classy_fabric.png);
}
.wrapper { width: 310px; margin: 40px auto; background: #353535; background: linear-gradient(45deg, #151515, #383838); padding: 20px; border-radius: 0.5em; border: 1px solid rgba(0, 0, 0, 0.9); position: relative; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.4);
}
.wrapper:after { content: ""; position: absolute; height: 1px; width: 96%; background: white; background: -moz-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -ms-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -o-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#151515), color-stop(0.05, #464647), color-stop(0.2, #fff), color-stop(0.7, #4a4a4a)); background: -webkit-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: linear-gradient(to right, #151515, #464647 5%, #ffffff 20%, #4a4a4a 70%); top: 0; left: 2%;
}
.wrapper:before,
.loader:before { content: ""; position: absolute; width: 38px; height: 1px; background: -moz-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -ms-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -o-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.5, rgba(255, 255, 255, 0.7)), to(transparent)); background: -webkit-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0)); top: -1px; left: 15%;
}
.loader { border-bottom: 1px solid rgba(0, 0, 0, 0.4); position: relative;
}
.loader:before { top: -19px; left: 10%;
}
.loader:after { content: ""; position: absolute; top: -21px; left: 16.5%; width: 3px; height: 3px; background: rgba(255, 255, 255, 0); border-radius: 50%; box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.2);
}
.wrapper p { text-transform: uppercase; color: white; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; font-weight: bold; text-shadow: 0 -1px 0 black, 0 1px 0 rgba(189, 189, 189, 0.2); font-size: 15px; text-align: center; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); position: relative;
}
.wrapper p:after { width: 220px; height: 160px; position: absolute; content: ""; background: rgba(0, 0, 0, 0.1); background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)); bottom: -20px; right: -20px; border-radius: 100% 0 0.5em 0 / 100% 0 0.5em 0;
}
.loader li { width: 8px; height: 20px; background: white; border-radius: 30px; position: absolute; top: 40px; left: 46px;
}
.loader ul { animation: spinner 2s steps(12, end) infinite; position: relative; width: 100px; height: 100px; margin: 0 auto 20px auto;
}
.loader li:nth-child(1) { transform: rotate(30deg) translate(0, -30px); background: #fff;
}
.loader li:nth-child(2) { transform: rotate(60deg) translate(0, -30px); background: #e8e8e8;
}
.loader li:nth-child(3) { transform: rotate(90deg) translate(0, -30px); background: #dedede;
}
.loader li:nth-child(4) { transform: rotate(120deg) translate(0, -30px); background: #d2d2d2;
}
.loader li:nth-child(5) { transform: rotate(150deg) translate(0, -30px); background: #bdbdbd;
}
.loader li:nth-child(6) { transform: rotate(180deg) translate(0, -30px); background: #a3a3a3;
}
.loader li:nth-child(7) { transform: rotate(210deg) translate(0, -30px); background: #767676;
}
.loader li:nth-child(8) { transform: rotate(240deg) translate(0, -30px); background: #616161;
}
.loader li:nth-child(9) { transform: rotate(270deg) translate(0, -30px); background: #505050;
}
.loader li:nth-child(10) { transform: rotate(300deg) translate(0, -30px); background: #494949;
}
.loader li:nth-child(11) { transform: rotate(330deg) translate(0, -30px); background: #424242;
}
.loader li:nth-child(12) { transform: rotate(0deg) translate(0, -30px); background: #383838;
}
@keyframes spinner { 0% { transform: rotate(0deg) scale(0.6); } 100% { transform: rotate(-360deg) scale(0.6); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <div class="loader"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <p>It's worth the wait.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Batman loader - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { background: #333 url(/images/classy_fabric.png);
}
.wrapper { width: 310px; margin: 40px auto; background: #353535; background: linear-gradient(45deg, #151515, #383838); padding: 20px; border-radius: 0.5em; border: 1px solid rgba(0, 0, 0, 0.9); position: relative; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.4);
}
.wrapper:after { content: ""; position: absolute; height: 1px; width: 96%; background: white; background: -moz-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -ms-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -o-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#151515), color-stop(0.05, #464647), color-stop(0.2, #fff), color-stop(0.7, #4a4a4a)); background: -webkit-linear-gradient(left, #151515, #464647 5%, #fff 20%, #4a4a4a 70%); background: linear-gradient(to right, #151515, #464647 5%, #ffffff 20%, #4a4a4a 70%); top: 0; left: 2%;
}
.wrapper:before,
.loader:before { content: ""; position: absolute; width: 38px; height: 1px; background: -moz-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -ms-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -o-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.5, rgba(255, 255, 255, 0.7)), to(transparent)); background: -webkit-linear-gradient(left, transparent, rgba(255, 255, 255, 0.7), transparent); background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0)); top: -1px; left: 15%;
}
.loader { border-bottom: 1px solid rgba(0, 0, 0, 0.4); position: relative;
}
.loader:before { top: -19px; left: 10%;
}
.loader:after { content: ""; position: absolute; top: -21px; left: 16.5%; width: 3px; height: 3px; background: rgba(255, 255, 255, 0); border-radius: 50%; box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.2);
}
.wrapper p { text-transform: uppercase; color: white; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; font-weight: bold; text-shadow: 0 -1px 0 black, 0 1px 0 rgba(189, 189, 189, 0.2); font-size: 15px; text-align: center; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); position: relative;
}
.wrapper p:after { width: 220px; height: 160px; position: absolute; content: ""; background: rgba(0, 0, 0, 0.1); background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)); bottom: -20px; right: -20px; border-radius: 100% 0 0.5em 0 / 100% 0 0.5em 0;
}
.loader li { width: 8px; height: 20px; background: white; border-radius: 30px; position: absolute; top: 40px; left: 46px;
}
.loader ul { animation: spinner 2s steps(12, end) infinite; position: relative; width: 100px; height: 100px; margin: 0 auto 20px auto;
}
.loader li:nth-child(1) { transform: rotate(30deg) translate(0, -30px); background: #fff;
}
.loader li:nth-child(2) { transform: rotate(60deg) translate(0, -30px); background: #e8e8e8;
}
.loader li:nth-child(3) { transform: rotate(90deg) translate(0, -30px); background: #dedede;
}
.loader li:nth-child(4) { transform: rotate(120deg) translate(0, -30px); background: #d2d2d2;
}
.loader li:nth-child(5) { transform: rotate(150deg) translate(0, -30px); background: #bdbdbd;
}
.loader li:nth-child(6) { transform: rotate(180deg) translate(0, -30px); background: #a3a3a3;
}
.loader li:nth-child(7) { transform: rotate(210deg) translate(0, -30px); background: #767676;
}
.loader li:nth-child(8) { transform: rotate(240deg) translate(0, -30px); background: #616161;
}
.loader li:nth-child(9) { transform: rotate(270deg) translate(0, -30px); background: #505050;
}
.loader li:nth-child(10) { transform: rotate(300deg) translate(0, -30px); background: #494949;
}
.loader li:nth-child(11) { transform: rotate(330deg) translate(0, -30px); background: #424242;
}
.loader li:nth-child(12) { transform: rotate(0deg) translate(0, -30px); background: #383838;
}
@keyframes spinner { 0% { transform: rotate(0deg) scale(0.6); } 100% { transform: rotate(-360deg) scale(0.6); }
}
| Developer | Hugo Giraudel |
| Username | HugoGiraudel |
| Uploaded | August 09, 2022 |
| Rating | 4.5 |
| Size | 4,984 Kb |
| Views | 32,384 |
Do you need developer help for Batman loader?
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!
Hugo Giraudel (HugoGiraudel) Script Codes
| Name | Size |
| Pure CSS light switch | 4,088 Kb |
| Social swatchbook | 4,245 Kb |
| CSS temperature controler | 4,789 Kb |
| Database CRUD JS Class | 4,236 Kb |
| CSS 3 progress bar | 2,808 Kb |
| Synchronise background position with padding | 3,411 Kb |
| Pure CSS pie timer | 3,378 Kb |
| Content through Media Queries | 9,350 Kb |
| Demo Flexbox 2 | 2,778 Kb |
| Batman login form | 4,731 Kb |
Create amazing captions 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 |
| FontAwesome icons with animation | Nicotinell | 2,083 Kb |
| LeMandinque | Aadesida | 9,046 Kb |
| Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
| Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
| 3d css cube | Semenchenko | 4,578 Kb |
| IE flex collapse bug fix | Rowno | 2,678 Kb |
| Css3 slide | Nakome | 3,190 Kb |
| Particle Motion trajectories | Sniejadlik | 5,899 Kb |
| Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
| Drag n Drop | Martin42 | 2,594 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!