Loader
How do I make an loader?
What is a loader? How do you make a loader? This script and codes were developed by Shridhar Deshmukh on 22 July 2022, Friday.
Loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loader</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='container'> <div class='loader-wrap'> <div class='loading_bar'> <div class='thumb'></div> </div> <div class='loader'>Loading</div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Loader - Script Codes CSS Codes
body { background-color: #1173a2;
}
.container { background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; bottom: 0; left: 0; right: 0;
}
.loader-wrap { margin: 50px auto; width: 120px; padding: 20px; background: -webkit-linear-gradient(top, #8bbbdf, #002450); background: -moz-linear-gradient(top, #8bbbdf, #002450); border-radius: 10px; overflow: hidden;
}
.loader-wrap .loader { color: white; display: inline-block; letter-spacing: 3px; text-transform: uppercase; font-size: 24px;
}
.loader-wrap .loading_bar { position: relative; top: 30px; left: 0; height: 3px; border-radius: 10px; width: 120px; margin: 0 auto;
}
.loader-wrap .loading_bar .thumb { -webkit-animation: loader_anim 1s linear infinite alternate; -moz-animation: loader_anim 1s linear infinite alternate; animation: loader_anim 1s linear infinite alternate; height: 100%; width: 120px; position: absolute; top: 0; background: -webkit-linear-gradient(top left, #f76c1a 0%, #FFF 50%, #f76c1a 100%); background: -moz-linear-gradient(top left, #f76c1a 0%, #FFF 50%, #f76c1a 100%);
}
@-webkit-keyframes loader_anim { from { left: -115px; } to { left: 115px; }
}
@-moz-keyframes loader_anim { from { left: -115px; } to { left: 115px; }
}
Developer | Shridhar Deshmukh |
Username | _shree33 |
Uploaded | July 22, 2022 |
Rating | 3 |
Size | 2,654 Kb |
Views | 70,840 |
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 |
HTML Imports | 1,870 Kb |
Hover Message Design | 1,711 Kb |
Blog Theme | 4,646 Kb |
This in Global Context | 1,716 Kb |
Hoisting | 2,056 Kb |
Registration Form Desgin | 4,357 Kb |
This in object method | 1,752 Kb |
This in DOM Event Handler | 1,792 Kb |
This with bind | 1,732 Kb |
Console logger | 1,731 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 |
GLSL Hills | Ykob | 6,991 Kb |
Console fun | Dviate | 1,500 Kb |
Colorful Sliders | Chanrith | 1,246 Kb |
Birthday Party Starter | Aussieyang | 1,629 Kb |
Mario | Takaneichinose | 3,902 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Slide like Mailbox | Hmps | 3,758 Kb |
E-mail Template | SoloMDFK | 4,871 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!