CSS3 Loader Animation - Peeek
How do I make an css3 loader animation - peeek?
This is the loader animation that designed by Mikael Edwards and developed by Rıza Selçuk Saydam for Peeek.. What is a css3 loader animation - peeek? How do you make a css3 loader animation - peeek? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.
CSS3 Loader Animation - Peeek - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Loader Animation - Peeek</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ .peeek-loading { background-color: #38d368; overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%;
}
.peeek-loading ul { position: absolute; left: calc(50% - 0.7em); top: calc(50% - 4.2em); display: inline-block; text-indent: 2.8em;
}
.peeek-loading ul li:after,
.peeek-loading ul:after { width: 1.4em; height: 1.4em; background-color: #fff; border-radius: 100%;
}
.peeek-loading ul li:after,
.peeek-loading ul:after { content: ""; display: block;
}
.peeek-loading ul:after { position: absolute; top: 2.8em;
}
.peeek-loading li { position: absolute; padding-bottom: 5.6em; top: 0; left: 0;
}
.peeek-loading li:nth-child(1) { transform: rotate(0deg); animation-delay: 0.125s;
}
.peeek-loading li:nth-child(1):after { animation-delay: 0.125s;
}
.peeek-loading li:nth-child(2) { transform: rotate(36deg); animation-delay: 0.25s;
}
.peeek-loading li:nth-child(2):after { animation-delay: 0.25s;
}
.peeek-loading li:nth-child(3) { transform: rotate(72deg); animation-delay: 0.375s;
}
.peeek-loading li:nth-child(3):after { animation-delay: 0.375s;
}
.peeek-loading li:nth-child(4) { transform: rotate(108deg); animation-delay: 0.5s;
}
.peeek-loading li:nth-child(4):after { animation-delay: 0.5s;
}
.peeek-loading li:nth-child(5) { transform: rotate(144deg); animation-delay: 0.625s;
}
.peeek-loading li:nth-child(5):after { animation-delay: 0.625s;
}
.peeek-loading li:nth-child(6) { transform: rotate(180deg); animation-delay: 0.75s;
}
.peeek-loading li:nth-child(6):after { animation-delay: 0.75s;
}
.peeek-loading li:nth-child(7) { transform: rotate(216deg); animation-delay: 0.875s;
}
.peeek-loading li:nth-child(7):after { animation-delay: 0.875s;
}
.peeek-loading li:nth-child(8) { transform: rotate(252deg); animation-delay: 1s;
}
.peeek-loading li:nth-child(8):after { animation-delay: 1s;
}
.peeek-loading li:nth-child(9) { transform: rotate(288deg); animation-delay: 1.125s;
}
.peeek-loading li:nth-child(9):after { animation-delay: 1.125s;
}
.peeek-loading li:nth-child(10) { transform: rotate(324deg); animation-delay: 1.25s;
}
.peeek-loading li:nth-child(10):after { animation-delay: 1.25s;
}
.peeek-loading li { animation: dotAnimation 2.5s infinite;
}
@keyframes dotAnimation { 0%, 55%, 100% { padding: 0 0 5.6em 0; } 5%,50% { padding: 2.8em 0; }
}
.peeek-loading li:after { animation: dotAnimationTwo 2.5s infinite;
}
@-webkit-keyframes dotAnimationTwo { 0%, 55%, 100% { opacity: 1; transform: scale(1); } 5%,50% { opacity: .5; transform: scale(0.5); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='peeek-loading'> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
CSS3 Loader Animation - Peeek - Script Codes CSS Codes
.peeek-loading { background-color: #38d368; overflow: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%;
}
.peeek-loading ul { position: absolute; left: calc(50% - 0.7em); top: calc(50% - 4.2em); display: inline-block; text-indent: 2.8em;
}
.peeek-loading ul li:after,
.peeek-loading ul:after { width: 1.4em; height: 1.4em; background-color: #fff; border-radius: 100%;
}
.peeek-loading ul li:after,
.peeek-loading ul:after { content: ""; display: block;
}
.peeek-loading ul:after { position: absolute; top: 2.8em;
}
.peeek-loading li { position: absolute; padding-bottom: 5.6em; top: 0; left: 0;
}
.peeek-loading li:nth-child(1) { transform: rotate(0deg); animation-delay: 0.125s;
}
.peeek-loading li:nth-child(1):after { animation-delay: 0.125s;
}
.peeek-loading li:nth-child(2) { transform: rotate(36deg); animation-delay: 0.25s;
}
.peeek-loading li:nth-child(2):after { animation-delay: 0.25s;
}
.peeek-loading li:nth-child(3) { transform: rotate(72deg); animation-delay: 0.375s;
}
.peeek-loading li:nth-child(3):after { animation-delay: 0.375s;
}
.peeek-loading li:nth-child(4) { transform: rotate(108deg); animation-delay: 0.5s;
}
.peeek-loading li:nth-child(4):after { animation-delay: 0.5s;
}
.peeek-loading li:nth-child(5) { transform: rotate(144deg); animation-delay: 0.625s;
}
.peeek-loading li:nth-child(5):after { animation-delay: 0.625s;
}
.peeek-loading li:nth-child(6) { transform: rotate(180deg); animation-delay: 0.75s;
}
.peeek-loading li:nth-child(6):after { animation-delay: 0.75s;
}
.peeek-loading li:nth-child(7) { transform: rotate(216deg); animation-delay: 0.875s;
}
.peeek-loading li:nth-child(7):after { animation-delay: 0.875s;
}
.peeek-loading li:nth-child(8) { transform: rotate(252deg); animation-delay: 1s;
}
.peeek-loading li:nth-child(8):after { animation-delay: 1s;
}
.peeek-loading li:nth-child(9) { transform: rotate(288deg); animation-delay: 1.125s;
}
.peeek-loading li:nth-child(9):after { animation-delay: 1.125s;
}
.peeek-loading li:nth-child(10) { transform: rotate(324deg); animation-delay: 1.25s;
}
.peeek-loading li:nth-child(10):after { animation-delay: 1.25s;
}
.peeek-loading li { animation: dotAnimation 2.5s infinite;
}
@keyframes dotAnimation { 0%, 55%, 100% { padding: 0 0 5.6em 0; } 5%,50% { padding: 2.8em 0; }
}
.peeek-loading li:after { animation: dotAnimationTwo 2.5s infinite;
}
@-webkit-keyframes dotAnimationTwo { 0%, 55%, 100% { opacity: 1; transform: scale(1); } 5%,50% { opacity: .5; transform: scale(0.5); }
}
CSS3 Loader Animation - Peeek - Script Codes JS Codes
/***
CSS3 Loader Animation - Peeek
Design: Mikael Edwards http://drbl.in/jccQ
Front-End: Rıza Selçuk Saydam http:/webmagazin.co
***/
Developer | Rıza Selçuk Saydam |
Username | rss |
Uploaded | August 02, 2022 |
Rating | 4.5 |
Size | 3,854 Kb |
Views | 54,648 |
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 |
SOCIAL BANG | 8,251 Kb |
How a Text Gradient is Made | 4,908 Kb |
Flutterby | 3,799 Kb |
Flat iOS 7 Safari Icon | 3,332 Kb |
Loader Animation | 2,761 Kb |
Little Boxes on an iPhone | 4,036 Kb |
Sticky footer - adjustPusher | 2,127 Kb |
Animated Flat Camera Icon | 3,843 Kb |
Button Switch | 5,239 Kb |
Contact Page CSS3 Transation | 6,686 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 |
Sass Radar | Jlong | 6,887 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
Faux column absolute wrapper | Yurimorini | 1,823 Kb |
Animated Logo | Shakdaniel | 2,672 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
Simple content swap | Snografx | 1,859 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
Content Changer | Cliffpyles | 4,538 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 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!