Advertisement
- 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
HTML
<!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>
- Inside the body tag, create a div element with a class of "cube-wrapper"
HTML
<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>
- 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
CSS
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; }}
- Save the file and open it in a web browser to see
