Yet another CSS3 Loader
How do I make an yet another css3 loader?
I had no idea what to pen next, so I did this to get more into the keyframe property.I would appreciate to see some feedback and maybe some ideas how to fix possible problems or how to do it better.. What is a yet another css3 loader? How do you make a yet another css3 loader? This script and codes were developed by Dean Hidri on 01 October 2022, Saturday.
Yet another CSS3 Loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Yet another CSS3 Loader</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="centering"> <div class="loaderContainer"> <div class="loaderBG"> <span class="loaderCircle"></span> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Yet another CSS3 Loader - Script Codes CSS Codes
html, body { height: 100%;
}
body { background: #de3030; color: #fff; font: normal 1em sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.centering { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
@-webkit-keyframes loader { 0% { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(120px); -moz-transform: translateX(120px); -ms-transform: translateX(120px); -o-transform: translateX(120px); transform: translateX(120px); }
}
@keyframes loader { 0% { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(120px); -moz-transform: translateX(120px); -ms-transform: translateX(120px); -o-transform: translateX(120px); transform: translateX(120px); }
}
.loaderContainer { width: 160px; margin: 0 auto; position: relative;
}
.loaderContainer .loaderBG { background: #be2727; width: 160px; height: 35px; border-radius: 2px; float: left;
}
.loaderContainer .loaderCircle { background: #fff; width: 40px; height: 40px; border-radius: 50%; float: left; position: absolute; top: -3px; /* calling our animation keyframe */ -webkit-animation: loader 2300ms infinite ease-in-out; -moz-animation: loader 2300ms infinite ease-in-out; -ms-animation: loader 2300ms infinite ease-in-out; -o-animation: loader 2300ms infinite ease-in-out; animation: loader 2300ms infinite ease-in-out;
}
Developer | Dean Hidri |
Username | visualcookie |
Uploaded | October 01, 2022 |
Rating | 4 |
Size | 2,726 Kb |
Views | 14,168 |
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 | Username | Size |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
Lunar eclipse | Ademilter | 2,056 Kb |
Wip elementary os navbar | Nickcolley | 2,993 Kb |
Slide In Panel | Vikvarg | 2,811 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
Webkit decolorize | Fivera | 1,675 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!