Loader
How do I make an loader?
What is a loader? How do you make a loader? This script and codes were developed by Alexander Hadik on 16 September 2022, Friday.
Loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="loader"> <div class="loader__ball"></div> <div class="loader__ball"></div> <div class="loader__ball"></div>
</div>
</body>
</html>
Loader - Script Codes CSS Codes
html { height: 100%; margin: 0;
}
body { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0;
}
.loader { background-color: #2E5363; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; width: 80px; height: 60px; padding: 0px 20px;
}
.loader__ball { background-color: white; border-radius: 50%; height: 10px; width: 10px; -webkit-animation-name: expand; animation-name: expand; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
}
.loader__ball:nth-of-type(1) { -webkit-animation-delay: 0s; animation-delay: 0s;
}
.loader__ball:nth-of-type(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s;
}
.loader__ball:nth-of-type(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s;
}
@-webkit-keyframes expand { from { width: 0px; height: 0px; } to { width: 15px; height: 15px; }
}
@keyframes expand { from { width: 0px; height: 0px; } to { width: 15px; height: 15px; }
}
Developer | Alexander Hadik |
Username | ahadik |
Uploaded | September 16, 2022 |
Rating | 3 |
Size | 2,296 Kb |
Views | 12,144 |
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 |
Protocol Card | 3,149 Kb |
Transcriptic Node Graph | 8,502 Kb |
HSL SVG Gradient | 1,809 Kb |
Transcriptic Typography | 4,188 Kb |
SVG in a Button Tag | 2,884 Kb |
IOPS Selector | 3,779 Kb |
Basil Tree | 5,064 Kb |
Red Pill or Blue Pill But Only CSS | 3,455 Kb |
Pricing Table | 4,023 Kb |
Pricing Cards V2 | 6,308 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 |
Typefaces with descriptions | Megandoty | 2,944 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
SlideupBoxes | Gavra | 23,772 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Starfield using KineticJS | Asp | 3,512 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!