More Simple Loaders..
How do I make an more simple loaders..?
..single-element box-shadow loaders.. as simple as one wants.. :P. What is a more simple loaders..? How do you make a more simple loaders..? This script and codes were developed by Unmesh Shukla on 03 September 2022, Saturday.
More Simple Loaders.. - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>More Simple Loaders..</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ .loaderbnw{ position:absolute; left:45%; top:20%;
}
.loadercol{ position:absolute; left:88%; top:20%;
}
.common{ position:absolute; border-radius:10px; background:transparent; box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px 0 0 1px; animation:myanim 1s ease-in-out infinite;
}
@keyframes myanim{ 29%{box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px 0 0 1px;} 80%{box-shadow:-100px -10px 0px 1px,-110px 0 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px 0 0 1px;} 70%{box-shadow:-100px 0 0 1px,-110px -10px 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px 0 0 1px;} 60%{box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px -10px 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px 0 0 1px;} 50%{box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px 0 0 1px,-130px -10px 0 1px,-140px 0 0 1px,-150px 0 0 1px;} 40%{box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px -10px 0 1px,-150px 0 0 1px;} 30%{box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px -10px 0 1px;}
}
.common2{ position:absolute; border-radius:10px; background:transparent; box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa; animation:myanim3 1s ease-in-out infinite;
}
@keyframes myanim3{ 29%{box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa;} 80%{box-shadow:-100px -10px 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa;} 70%{box-shadow:-100px 0 0 1px #faf,-110px -10px 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa;} 60%{box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px -10px 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa;} 50%{box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px -10px 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa;} 40%{box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px -10px 0 1px #aab,-150px 0 0 1px #aaa;} 30%{box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px -10px 0 1px #aaa;}
}
.e1{ top:0; border:2px solid transparent;
}
.e2{ top:40px; width:4px; height:15px;
}
.e3{ top:80px; width:1px; height:25px;
}
.e4{ transform:skewY(-45deg); top:30px; width:10px; height:2px;
}
.e5{ transform:skewY(45deg); top:280px; width:10px; height:2px;
}
.e6{ animation:myanim 1s ease-in-out infinite,myanim2 1s ease-in-out infinite; top:210px; width:2px; height:2px;
}
.e62{ animation:myanim3 1s ease-in-out infinite,myanim2 1s ease-in-out infinite; top:210px; width:2px; height:2px;
}
@keyframes myanim2{ 50%{height:10px;}
}
body{background:#9af;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='loaderbnw'> <div class='e1 common'></div> <div class='e2 common'></div> <div class='e3 common'></div> <div class='e4 common'></div> <div class='e5 common'></div> <div class='e6 common'></div>
</div>
<div class='loadercol'> <div class='e1 common2'></div> <div class='e2 common2'></div> <div class='e3 common2'></div> <div class='e4 common2'></div> <div class='e5 common2'></div> <div class='e62 common2'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
More Simple Loaders.. - Script Codes CSS Codes
.loaderbnw{ position:absolute; left:45%; top:20%;
}
.loadercol{ position:absolute; left:88%; top:20%;
}
.common{ position:absolute; border-radius:10px; background:transparent; box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px 0 0 1px; animation:myanim 1s ease-in-out infinite;
}
@keyframes myanim{ 29%{box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px 0 0 1px;} 80%{box-shadow:-100px -10px 0px 1px,-110px 0 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px 0 0 1px;} 70%{box-shadow:-100px 0 0 1px,-110px -10px 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px 0 0 1px;} 60%{box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px -10px 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px 0 0 1px;} 50%{box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px 0 0 1px,-130px -10px 0 1px,-140px 0 0 1px,-150px 0 0 1px;} 40%{box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px -10px 0 1px,-150px 0 0 1px;} 30%{box-shadow:-100px 0 0 1px,-110px 0 0 1px,-120px 0 0 1px,-130px 0 0 1px,-140px 0 0 1px,-150px -10px 0 1px;}
}
.common2{ position:absolute; border-radius:10px; background:transparent; box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa; animation:myanim3 1s ease-in-out infinite;
}
@keyframes myanim3{ 29%{box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa;} 80%{box-shadow:-100px -10px 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa;} 70%{box-shadow:-100px 0 0 1px #faf,-110px -10px 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa;} 60%{box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px -10px 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa;} 50%{box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px -10px 0 1px #9aa,-140px 0 0 1px #aab,-150px 0 0 1px #aaa;} 40%{box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px -10px 0 1px #aab,-150px 0 0 1px #aaa;} 30%{box-shadow:-100px 0 0 1px #faf,-110px 0 0 1px #aff,-120px 0 0 1px #ffa,-130px 0 0 1px #9aa,-140px 0 0 1px #aab,-150px -10px 0 1px #aaa;}
}
.e1{ top:0; border:2px solid transparent;
}
.e2{ top:40px; width:4px; height:15px;
}
.e3{ top:80px; width:1px; height:25px;
}
.e4{ transform:skewY(-45deg); top:30px; width:10px; height:2px;
}
.e5{ transform:skewY(45deg); top:280px; width:10px; height:2px;
}
.e6{ animation:myanim 1s ease-in-out infinite,myanim2 1s ease-in-out infinite; top:210px; width:2px; height:2px;
}
.e62{ animation:myanim3 1s ease-in-out infinite,myanim2 1s ease-in-out infinite; top:210px; width:2px; height:2px;
}
@keyframes myanim2{ 50%{height:10px;}
}
body{background:#9af;}
Developer | Unmesh Shukla |
Username | unmeshpro |
Uploaded | September 03, 2022 |
Rating | 3.5 |
Size | 2,666 Kb |
Views | 48,576 |
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 |
Simple Opening SCSS Cubes | 4,200 Kb |
CSS3 Text Effects.. | 2,557 Kb |
Again a simple single-element loader.. | 2,355 Kb |
A veriiiiii simple loader | 1,978 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 |
Stylize Stories | Jvhti | 2,465 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
This in constructor context | _shree33 | 1,718 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
The Rope | Chribbe | 2,886 Kb |
Chuck Norris Background | Manz | 1,967 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!