Pure Css Loader - Square
How do I make an pure css loader - square?
My first loader, usign SCSS without JS.. What is a pure css loader - square? How do you make a pure css loader - square? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.
Pure Css Loader - Square - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure Css Loader - Square</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="loader"> <div class="square" ></div> <div class="square"></div> <div class="square last"></div> <div class="square clear"></div> <div class="square"></div> <div class="square last"></div> <div class="square clear"></div> <div class="square "></div> <div class="square last"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Pure Css Loader - Square - Script Codes CSS Codes
@-webkit-keyframes enter { 0% { opacity: 0; top: -10px; } 5% { opacity: 1; top: 0px; } 50.9% { opacity: 1; top: 0px; } 55.9% { opacity: 0; top: 10px; }
}
@keyframes enter { 0% { opacity: 0; top: -10px; } 5% { opacity: 1; top: 0px; } 50.9% { opacity: 1; top: 0px; } 55.9% { opacity: 0; top: 10px; }
}
@-moz-keyframes enter { 0% { opacity: 0; top: -10px; } 5% { opacity: 1; top: 0px; } 50.9% { opacity: 1; top: 0px; } 55.9% { opacity: 0; top: 10px; }
}
body { background: #1fbeca;
}
* { margin: 0;
}
.loader { position: absolute; left: 50%; top: 50%; margin-left: -27.5px; margin-top: -27.5px;
}
.square { background: white; width: 15px; height: 15px; float: left; top: -10px; margin-right: 5px; margin-top: 5px; position: relative; opacity: 0; -webkit-animation: enter 6s infinite; animation: enter 6s infinite;
}
.enter { top: 0px; opacity: 1;
}
.square:nth-child(1) { -webkit-animation-delay: 1.8s; -moz-animation-delay: 1.8s; animation-delay: 1.8s;
}
.square:nth-child(2) { -webkit-animation-delay: 2.1s; -moz-animation-delay: 2.1s; animation-delay: 2.1s;
}
.square:nth-child(3) { -webkit-animation-delay: 2.4s; -moz-animation-delay: 2.4s; animation-delay: 2.4s; background: #fdc96f;
}
.square:nth-child(4) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; animation-delay: 0.9s;
}
.square:nth-child(5) { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s;
}
.square:nth-child(6) { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s;
}
.square:nth-child(8) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;
}
.square:nth-child(9) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s;
}
.clear { clear: both;
}
.last { margin-right: 0;
}
![Pure Css Loader - Square - Script Codes](http://shots.codepen.io/dghez/pen/Czuqn-512.jpg)
Developer | Robert Borghesi |
Username | dghez |
Uploaded | August 27, 2022 |
Rating | 4.5 |
Size | 2,498 Kb |
Views | 38,456 |
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 |
Pure custom css animation on new google logo | 3,362 Kb |
Text-mask background moving on MouseMove - v2 | 3,050 Kb |
Pulse Avatar on click with TweenMax | 4,116 Kb |
Hover otating cards folder of OnePiece characters | 3,131 Kb |
Sorting with morphing content | 2,387 Kb |
Continuous scrolling background of sticky header | 5,109 Kb |
Gradient border on hover - Scorer of fifa world cup | 3,598 Kb |
Enel brand - logo animation with tweenmax | 127,271 Kb |
Simple PureCss dropdown menu with following subnav | 2,966 Kb |
Best 3 players on fifa 14 - HOVER THEM | 3,546 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 |
Owl Carousel - jumpTo | OwlFonk | 2,553 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Konami Code Easter Egg | Teolitto | 3,051 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Expert Help | SinceSidSlid | 4,064 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!