Another Simple CSS load animation
How do I make an another simple css load animation?
What is a another simple css load animation? How do you make a another simple css load animation? This script and codes were developed by Paul Sullivan on 26 January 2023, Thursday.
Another Simple CSS load animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Another Simple CSS load animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div> <div> <div class="bar"></div> </div>
</div>
</body>
</html>
Another Simple CSS load animation - Script Codes CSS Codes
html { background-color: #2e2e2e;
}
.wrapper { position: fixed; top: 50%; left: 50%; margin-left: -55px; margin-top: -50px;
}
.wrapper div:nth-child(1) { -webkit-transform: rotate(5deg); transform: rotate(5deg);
}
.wrapper div:nth-child(2) { -webkit-transform: rotate(10deg); transform: rotate(10deg);
}
.wrapper div:nth-child(3) { -webkit-transform: rotate(15deg); transform: rotate(15deg);
}
.wrapper div:nth-child(4) { -webkit-transform: rotate(20deg); transform: rotate(20deg);
}
.wrapper div:nth-child(5) { -webkit-transform: rotate(25deg); transform: rotate(25deg);
}
.wrapper div:nth-child(6) { -webkit-transform: rotate(30deg); transform: rotate(30deg);
}
.wrapper div:nth-child(7) { -webkit-transform: rotate(35deg); transform: rotate(35deg);
}
.wrapper div:nth-child(8) { -webkit-transform: rotate(40deg); transform: rotate(40deg);
}
.wrapper div:nth-child(9) { -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.wrapper div:nth-child(10) { -webkit-transform: rotate(50deg); transform: rotate(50deg);
}
.wrapper div:nth-child(11) { -webkit-transform: rotate(55deg); transform: rotate(55deg);
}
.wrapper div:nth-child(12) { -webkit-transform: rotate(60deg); transform: rotate(60deg);
}
.wrapper div:nth-child(13) { -webkit-transform: rotate(65deg); transform: rotate(65deg);
}
.wrapper div:nth-child(14) { -webkit-transform: rotate(70deg); transform: rotate(70deg);
}
.wrapper div:nth-child(15) { -webkit-transform: rotate(75deg); transform: rotate(75deg);
}
.wrapper div:nth-child(16) { -webkit-transform: rotate(80deg); transform: rotate(80deg);
}
.wrapper div:nth-child(17) { -webkit-transform: rotate(85deg); transform: rotate(85deg);
}
.wrapper div:nth-child(18) { -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.wrapper div:nth-child(19) { -webkit-transform: rotate(95deg); transform: rotate(95deg);
}
.wrapper div:nth-child(20) { -webkit-transform: rotate(100deg); transform: rotate(100deg);
}
.wrapper div:nth-child(21) { -webkit-transform: rotate(105deg); transform: rotate(105deg);
}
.wrapper div:nth-child(22) { -webkit-transform: rotate(110deg); transform: rotate(110deg);
}
.wrapper div:nth-child(23) { -webkit-transform: rotate(115deg); transform: rotate(115deg);
}
.wrapper div:nth-child(24) { -webkit-transform: rotate(120deg); transform: rotate(120deg);
}
.wrapper div:nth-child(25) { -webkit-transform: rotate(125deg); transform: rotate(125deg);
}
.wrapper div:nth-child(26) { -webkit-transform: rotate(130deg); transform: rotate(130deg);
}
.wrapper div:nth-child(27) { -webkit-transform: rotate(135deg); transform: rotate(135deg);
}
.wrapper div:nth-child(28) { -webkit-transform: rotate(140deg); transform: rotate(140deg);
}
.wrapper div:nth-child(29) { -webkit-transform: rotate(145deg); transform: rotate(145deg);
}
.wrapper div:nth-child(30) { -webkit-transform: rotate(150deg); transform: rotate(150deg);
}
.wrapper div:nth-child(31) { -webkit-transform: rotate(155deg); transform: rotate(155deg);
}
.wrapper div:nth-child(32) { -webkit-transform: rotate(160deg); transform: rotate(160deg);
}
.wrapper div:nth-child(33) { -webkit-transform: rotate(165deg); transform: rotate(165deg);
}
.wrapper div:nth-child(34) { -webkit-transform: rotate(170deg); transform: rotate(170deg);
}
.wrapper div:nth-child(35) { -webkit-transform: rotate(175deg); transform: rotate(175deg);
}
.wrapper div:nth-child(36) { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.wrapper div:nth-child(37) { -webkit-transform: rotate(185deg); transform: rotate(185deg);
}
.wrapper div:nth-child(38) { -webkit-transform: rotate(190deg); transform: rotate(190deg);
}
.wrapper div:nth-child(39) { -webkit-transform: rotate(195deg); transform: rotate(195deg);
}
.wrapper div:nth-child(40) { -webkit-transform: rotate(200deg); transform: rotate(200deg);
}
.wrapper div:nth-child(41) { -webkit-transform: rotate(205deg); transform: rotate(205deg);
}
.wrapper div:nth-child(42) { -webkit-transform: rotate(210deg); transform: rotate(210deg);
}
.wrapper div:nth-child(43) { -webkit-transform: rotate(215deg); transform: rotate(215deg);
}
.wrapper div:nth-child(44) { -webkit-transform: rotate(220deg); transform: rotate(220deg);
}
.wrapper div:nth-child(45) { -webkit-transform: rotate(225deg); transform: rotate(225deg);
}
.wrapper div:nth-child(46) { -webkit-transform: rotate(230deg); transform: rotate(230deg);
}
.wrapper div:nth-child(47) { -webkit-transform: rotate(235deg); transform: rotate(235deg);
}
.wrapper div:nth-child(48) { -webkit-transform: rotate(240deg); transform: rotate(240deg);
}
.wrapper div:nth-child(49) { -webkit-transform: rotate(245deg); transform: rotate(245deg);
}
.wrapper div:nth-child(50) { -webkit-transform: rotate(250deg); transform: rotate(250deg);
}
.wrapper div:nth-child(51) { -webkit-transform: rotate(255deg); transform: rotate(255deg);
}
.wrapper div:nth-child(52) { -webkit-transform: rotate(260deg); transform: rotate(260deg);
}
.wrapper div:nth-child(53) { -webkit-transform: rotate(265deg); transform: rotate(265deg);
}
.wrapper div:nth-child(54) { -webkit-transform: rotate(270deg); transform: rotate(270deg);
}
.wrapper div:nth-child(55) { -webkit-transform: rotate(275deg); transform: rotate(275deg);
}
.wrapper div:nth-child(56) { -webkit-transform: rotate(280deg); transform: rotate(280deg);
}
.wrapper div:nth-child(57) { -webkit-transform: rotate(285deg); transform: rotate(285deg);
}
.wrapper div:nth-child(58) { -webkit-transform: rotate(290deg); transform: rotate(290deg);
}
.wrapper div:nth-child(59) { -webkit-transform: rotate(295deg); transform: rotate(295deg);
}
.wrapper div:nth-child(60) { -webkit-transform: rotate(300deg); transform: rotate(300deg);
}
.wrapper div:nth-child(61) { -webkit-transform: rotate(305deg); transform: rotate(305deg);
}
.wrapper div:nth-child(62) { -webkit-transform: rotate(310deg); transform: rotate(310deg);
}
.wrapper div:nth-child(63) { -webkit-transform: rotate(315deg); transform: rotate(315deg);
}
.wrapper div:nth-child(64) { -webkit-transform: rotate(320deg); transform: rotate(320deg);
}
.wrapper div:nth-child(65) { -webkit-transform: rotate(325deg); transform: rotate(325deg);
}
.wrapper div:nth-child(66) { -webkit-transform: rotate(330deg); transform: rotate(330deg);
}
.wrapper div:nth-child(67) { -webkit-transform: rotate(335deg); transform: rotate(335deg);
}
.wrapper div:nth-child(68) { -webkit-transform: rotate(340deg); transform: rotate(340deg);
}
.wrapper div:nth-child(69) { -webkit-transform: rotate(345deg); transform: rotate(345deg);
}
.wrapper div:nth-child(70) { -webkit-transform: rotate(350deg); transform: rotate(350deg);
}
.wrapper div:nth-child(71) { -webkit-transform: rotate(355deg); transform: rotate(355deg);
}
.wrapper div { position: absolute; height: 50px; width: 50px; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%;
}
.wrapper div .bar { position: absolute; height: 1px; width: 100px; background-color: #369; left: 0; border-radius: 20px; -webkit-transform-origin: right; transform-origin: right; -webkit-animation: spin 6s linear infinite; animation: spin 6s linear infinite;
}
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
Developer | Paul Sullivan |
Username | pwsm50 |
Uploaded | January 26, 2023 |
Rating | 3.5 |
Size | 2,688 Kb |
Views | 8,096 |
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 |
Facebook-like Click-to-grow Like Button | 2,607 Kb |
Full screen burger menu | 3,923 Kb |
CSS Particle Box | 67,348 Kb |
Crazed Bacteria | 2,886 Kb |
Circular Audio Bars | 3,343 Kb |
Asana Style Buttons | 2,502 Kb |
Dart Scoreboard | 4,848 Kb |
CSS speaker | 3,046 Kb |
A Pen by Paul Sullivan | 2,349 Kb |
Flying Bee | 3,711 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 |
Javascript Welcome | Peterlewicki | 1,573 Kb |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Experiment | Toddmoy | 2,849 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Drill-down Map | Good886 | 8,484 Kb |
Loader | MikitaLisavets | 3,321 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Eunice A | Ejbronze | 2,203 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!