Cube Flipping Loader
How do I make an cube flipping loader?
CSS Simple Cube Flip Loading Animation. What is a cube flipping loader? How do you make a cube flipping loader? This script and codes were developed by Nikhil Krishnan on 19 November 2022, Saturday.
Cube Flipping Loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cube Flipping Loader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Cube Flipping Loader</h1>
<div class="cube-wrapper"> <div class="cube-folding"> <span class="leaf1"></span> <span class="leaf2"></span> <span class="leaf3"></span> <span class="leaf4"></span> </div> <span class="loading" data-name="Loading">Loading</span>
</div>
<!-- follow me template -->
<div class="made-with-love"> Made with <i>♥</i> by <a target="_blank" href="https://codepen.io/nikhil8krishnan">Nikhil Krishnan</a>
</div>
</body>
</html>
Cube Flipping Loader - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Archivo+Narrow);
.cube-folding { width: 50px; height: 50px; display: inline-block; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); font-size: 0;
}
.cube-folding span { position: relative; width: 25px; height: 25px; -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); display: inline-block;
}
.cube-folding span::before { content: ''; background-color: white; position: absolute; left: 0; top: 0; display: block; width: 25px; height: 25px; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -moz-animation: folding 2.5s infinite linear both; -webkit-animation: folding 2.5s infinite linear both; animation: folding 2.5s infinite linear both;
}
.cube-folding .leaf2 { -moz-transform: rotateZ(90deg) scale(1.1); -ms-transform: rotateZ(90deg) scale(1.1); -webkit-transform: rotateZ(90deg) scale(1.1); transform: rotateZ(90deg) scale(1.1);
}
.cube-folding .leaf2::before { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; background-color: #f2f2f2;
}
.cube-folding .leaf3 { -moz-transform: rotateZ(270deg) scale(1.1); -ms-transform: rotateZ(270deg) scale(1.1); -webkit-transform: rotateZ(270deg) scale(1.1); transform: rotateZ(270deg) scale(1.1);
}
.cube-folding .leaf3::before { -moz-animation-delay: 0.9s; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; background-color: #f2f2f2;
}
.cube-folding .leaf4 { -moz-transform: rotateZ(180deg) scale(1.1); -ms-transform: rotateZ(180deg) scale(1.1); -webkit-transform: rotateZ(180deg) scale(1.1); transform: rotateZ(180deg) scale(1.1);
}
.cube-folding .leaf4::before { -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; background-color: #e6e6e6;
}
@-moz-keyframes folding { 0%, 10% { -moz-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -moz-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -moz-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }
}
@-webkit-keyframes folding { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }
}
@keyframes folding { 0%, 10% { -moz-transform: perspective(140px) rotateX(-180deg); -ms-transform: perspective(140px) rotateX(-180deg); -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -moz-transform: perspective(140px) rotateX(0deg); -ms-transform: perspective(140px) rotateX(0deg); -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -moz-transform: perspective(140px) rotateY(180deg); -ms-transform: perspective(140px) rotateY(180deg); -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }
}
.cube-wrapper { position: fixed; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; text-align: center;
}
.cube-wrapper:after { content: ''; position: absolute; left: 0; right: 0; bottom: -20px; margin: auto; width: 90px; height: 6px; background-color: rgba(0, 0, 0, 0.1); -webkit-filter: blur(2px); filter: blur(2px); -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; z-index: 1; -moz-animation: shadow 0.5s ease infinite alternate; -webkit-animation: shadow 0.5s ease infinite alternate; animation: shadow 0.5s ease infinite alternate;
}
.cube-wrapper .loading { font-size: 12px; letter-spacing: 0.1em; display: block; color: white; position: relative; top: 25px; z-index: 2; -moz-animation: text 0.5s ease infinite alternate; -webkit-animation: text 0.5s ease infinite alternate; animation: text 0.5s ease infinite alternate;
}
@-moz-keyframes text { 100% { top: 35px; }
}
@-webkit-keyframes text { 100% { top: 35px; }
}
@keyframes text { 100% { top: 35px; }
}
@-moz-keyframes shadow { 100% { bottom: -18px; width: 100px; }
}
@-webkit-keyframes shadow { 100% { bottom: -18px; width: 100px; }
}
@keyframes shadow { 100% { bottom: -18px; width: 100px; }
}
html, body { min-height: 100%;
}
body { background: #00c6ff; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #00c6ff, #0072ff); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #00c6ff, #0072ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: arial;
}
h1 { font-size: 26px; display: block; text-align: center; color: #fff; padding: 50px 20px; font-weight: 300; font-family: 'Archivo Narrow', sans-serif;
}
.made-with-love { position: fixed; left: 0; width: 100%; bottom: 10px; text-align: center; font-size: 10px; z-index: 9999; font-family: arial; color: #fff;
}
.made-with-love i { font-style: normal; color: #F50057; font-size: 14px; position: relative; top: 2px;
}
.made-with-love a { color: #fff; text-decoration: none;
}
.made-with-love a:hover { text-decoration: underline;
}
Developer | Nikhil Krishnan |
Username | nikhil8krishnan |
Uploaded | November 19, 2022 |
Rating | 4.5 |
Size | 4,154 Kb |
Views | 24,288 |
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 |
Fixed table header | 2,842 Kb |
IOS glossy effect | 3,141 Kb |
Pure CSS3 sequence animation | 413,031 Kb |
ICON TRANSFORMATION MENU | 3,567 Kb |
SVG Loader Animation | 3,912 Kb |
Mouse Wheel Animation | 5,442 Kb |
My template | 2,936 Kb |
Loving Car - Pure CSS with animation | 26,151 Kb |
Responsive Material Form v.2 | 7,122 Kb |
Vivus js | 2,949 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 |
Toggling Divs with jQuery | Yying6 | 1,967 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
Experiment | Toddmoy | 2,849 Kb |
DFF Website | Hawcubite | 10,123 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
Cars going | Netoguimaraes | 1,699 Kb |
Parallax.js | Zmeeey5 | 2,330 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!