Here's an example of a CSS Cubes Loader Effects & Animation created using pure CSS.
1. Create an HTML file and include a basic structure with a head and body tag. You can use the following code as a starting point and Add the CSS files to your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Cubes Loader Effects & Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>2. Inside the body tag, create a div element with a class of "cube-wrapper".
<div class="cube-wrapper">
<div class="cube-folding">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loading">Loading
<span>.</span>
<span>.</span>
<span>.</span>
</div>
</div>3. Create a CSS file and style your CSS Cubes Loader to make it look nice. You can use the following code as a starting point:
html,
body {
min-height: 100%;
}
body {
background: #00c6ff;
background: linear-gradient(to left, #00c6ff, #0072ff);
font-family: sans-serif;
}
.cube-wrapper {
position: fixed;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
text-align: center;
}
.cube-folding {
width: 50px;
height: 50px;
display: inline-block;
transform: rotate(45deg);
font-size: 0;
}
.cube-folding span {
position: relative;
width: 25px;
height: 25px;
transform: scale(1.1);
display: inline-block;
}
.cube-folding span::before {
content: "";
background-color: #FFF;
position: absolute;
left: 0;
top: 0;
display: block;
width: 25px;
height: 25px;
transform-origin: 100% 100%;
animation: folding 2.5s infinite linear both;
}
@keyframes folding {
0%,
10% {
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
.cube-folding span:nth-child(2) {
transform: rotateZ(90deg) scale(1.1);
}
.cube-folding span:nth-child(2)::before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
background-color: #f2f2f2;
}
.cube-folding span:nth-child(3) {
transform: rotateZ(270deg) scale(1.1);
}
.cube-folding span:nth-child(3)::before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
background-color: #f2f2f2;
}
.cube-folding span:nth-child(4) {
transform: rotateZ(180deg) scale(1.1);
}
.cube-folding span:nth-child(4)::before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
background-color: #e6e6e6;
}
.cube-wrapper .loading {
font-size: 12px;
letter-spacing: 0.1em;
display: block;
color: #fff;
position: relative;
top: 25px;
z-index: 2;
}
.cube-wrapper .loading span {
font-weight: 600;
letter-spacing: -2px;
animation: text 1s infinite alternate;
}
.cube-wrapper .loading span:nth-child(1) {
animation-delay: 0.1s;
}
.cube-wrapper .loading span:nth-child(2) {
animation-delay: 0.6s;
}
.cube-wrapper .loading span:nth-child(3) {
animation-delay: 0.9s;
}
@keyframes text {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}4. Save the file and open it in a web browser to see your Social Media Icon.
Html Code
<div class="cube-wrapper">
<div class="cube-folding">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loading">Loading
<span>.</span>
<span>.</span>
<span>.</span>
</div>
</div>Css Code
html,
body {
min-height: 100%;
}
body {
background: #00c6ff;
background: linear-gradient(to left, #00c6ff, #0072ff);
font-family: sans-serif;
}
.cube-wrapper {
position: fixed;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
text-align: center;
}
.cube-folding {
width: 50px;
height: 50px;
display: inline-block;
transform: rotate(45deg);
font-size: 0;
}
.cube-folding span {
position: relative;
width: 25px;
height: 25px;
transform: scale(1.1);
display: inline-block;
}
.cube-folding span::before {
content: "";
background-color: #FFF;
position: absolute;
left: 0;
top: 0;
display: block;
width: 25px;
height: 25px;
transform-origin: 100% 100%;
animation: folding 2.5s infinite linear both;
}
@keyframes folding {
0%,
10% {
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
.cube-folding span:nth-child(2) {
transform: rotateZ(90deg) scale(1.1);
}
.cube-folding span:nth-child(2)::before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
background-color: #f2f2f2;
}
.cube-folding span:nth-child(3) {
transform: rotateZ(270deg) scale(1.1);
}
.cube-folding span:nth-child(3)::before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
background-color: #f2f2f2;
}
.cube-folding span:nth-child(4) {
transform: rotateZ(180deg) scale(1.1);
}
.cube-folding span:nth-child(4)::before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
background-color: #e6e6e6;
}
.cube-wrapper .loading {
font-size: 12px;
letter-spacing: 0.1em;
display: block;
color: #fff;
position: relative;
top: 25px;
z-index: 2;
}
.cube-wrapper .loading span {
font-weight: 600;
letter-spacing: -2px;
animation: text 1s infinite alternate;
}
.cube-wrapper .loading span:nth-child(1) {
animation-delay: 0.1s;
}
.cube-wrapper .loading span:nth-child(2) {
animation-delay: 0.6s;
}
.cube-wrapper .loading span:nth-child(3) {
animation-delay: 0.9s;
}
@keyframes text {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}