Pure css loader

Developer
Size
3,918 Kb
Views
36,432

How do I make an pure css loader?

Pure css loader, with 3d transforms. What is a pure css loader? How do you make a pure css loader? This script and codes were developed by Martin Grand on 11 August 2022, Thursday.

Pure css loader Previews

Pure css loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>pure css loader</title> <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! */ html, body { width: 100%; height: 100%; padding: 0; margin: 0;
}
body { background-color: #121214; background-image: -webkit-linear-gradient(#121214, #343437); background-image: linear-gradient(#121214, #343437);
}
figure { position: absolute; width: 0; height: 0; left: 50%; top: 50%; margin: -60px -50px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600; -moz-perspective: 600; perspective: 600;
}
figure span { display: block; position: absolute; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
figure span:after { display: block; content: ''; border-style: solid; border-color: transparent; border-width: 100px 58px 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
figure span:nth-child(1) { -webkit-transform: rotate3d(0, 0, 1, 90deg); -moz-transform: rotate3d(0, 0, 1, 90deg); -ms-transform: rotate3d(0, 0, 1, 90deg); -o-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg);
}
figure span:nth-child(1):after { border-top-color: #eaff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.11111s ease infinite; -moz-animation: split 2s 0.11111s ease infinite; animation: split 2s 0.11111s ease infinite;
}
figure span:nth-child(2) { -webkit-transform: rotate3d(0, 0, 1, 150deg); -moz-transform: rotate3d(0, 0, 1, 150deg); -ms-transform: rotate3d(0, 0, 1, 150deg); -o-transform: rotate3d(0, 0, 1, 150deg); transform: rotate3d(0, 0, 1, 150deg);
}
figure span:nth-child(2):after { border-top-color: #d5ff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.22222s ease infinite; -moz-animation: split 2s 0.22222s ease infinite; animation: split 2s 0.22222s ease infinite;
}
figure span:nth-child(3) { -webkit-transform: rotate3d(0, 0, 1, 210deg); -moz-transform: rotate3d(0, 0, 1, 210deg); -ms-transform: rotate3d(0, 0, 1, 210deg); -o-transform: rotate3d(0, 0, 1, 210deg); transform: rotate3d(0, 0, 1, 210deg);
}
figure span:nth-child(3):after { border-top-color: #bfff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.33333s ease infinite; -moz-animation: split 2s 0.33333s ease infinite; animation: split 2s 0.33333s ease infinite;
}
figure span:nth-child(4) { -webkit-transform: rotate3d(0, 0, 1, 270deg); -moz-transform: rotate3d(0, 0, 1, 270deg); -ms-transform: rotate3d(0, 0, 1, 270deg); -o-transform: rotate3d(0, 0, 1, 270deg); transform: rotate3d(0, 0, 1, 270deg);
}
figure span:nth-child(4):after { border-top-color: #aaff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.44444s ease infinite; -moz-animation: split 2s 0.44444s ease infinite; animation: split 2s 0.44444s ease infinite;
}
figure span:nth-child(5) { -webkit-transform: rotate3d(0, 0, 1, 330deg); -moz-transform: rotate3d(0, 0, 1, 330deg); -ms-transform: rotate3d(0, 0, 1, 330deg); -o-transform: rotate3d(0, 0, 1, 330deg); transform: rotate3d(0, 0, 1, 330deg);
}
figure span:nth-child(5):after { border-top-color: #95ff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.55556s ease infinite; -moz-animation: split 2s 0.55556s ease infinite; animation: split 2s 0.55556s ease infinite;
}
figure span:nth-child(6) { -webkit-transform: rotate3d(0, 0, 1, 390deg); -moz-transform: rotate3d(0, 0, 1, 390deg); -ms-transform: rotate3d(0, 0, 1, 390deg); -o-transform: rotate3d(0, 0, 1, 390deg); transform: rotate3d(0, 0, 1, 390deg);
}
figure span:nth-child(6):after { border-top-color: #80ff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.66667s ease infinite; -moz-animation: split 2s 0.66667s ease infinite; animation: split 2s 0.66667s ease infinite;
}
@-webkit-keyframes split { 0% { -webkit-transform-origin: 50% 100%; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); } 25% { -webkit-transform-origin: 50% 100%; -webkit-transform: rotate3d(0, 1, 0, 360deg); } 50% { opacity: 1; -webkit-transform-origin: 100% 0%; -webkit-transform: rotate3d(0, 1, 0, 360deg); } 75% { opacity: 0; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); } 100% { opacity: 1; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); }
}
@-moz-keyframes split { 0% { -moz-transform-origin: 50% 100%; -moz-transform: rotate3d(0.5, 1, 0, 180deg); } 25% { -moz-transform-origin: 50% 100%; -moz-transform: rotate3d(0, 1, 0, 360deg); } 50% { opacity: 1; -moz-transform-origin: 100% 0%; -moz-transform: rotate3d(0, 1, 0, 360deg); } 75% { opacity: 0; -moz-transform: rotate3d(0.5, 1, 0, 180deg); } 100% { opacity: 1; -moz-transform: rotate3d(0.5, 1, 0, 180deg); }
}
@keyframes split { 0% { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); } 25% { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotate3d(0, 1, 0, 360deg); -moz-transform: rotate3d(0, 1, 0, 360deg); -ms-transform: rotate3d(0, 1, 0, 360deg); -o-transform: rotate3d(0, 1, 0, 360deg); transform: rotate3d(0, 1, 0, 360deg); } 50% { opacity: 1; -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: rotate3d(0, 1, 0, 360deg); -moz-transform: rotate3d(0, 1, 0, 360deg); -ms-transform: rotate3d(0, 1, 0, 360deg); -o-transform: rotate3d(0, 1, 0, 360deg); transform: rotate3d(0, 1, 0, 360deg); } 75% { opacity: 0; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); } 100% { opacity: 1; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <figure> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span>
</figure>
</body>
</html>

Pure css loader - Script Codes CSS Codes

html, body { width: 100%; height: 100%; padding: 0; margin: 0;
}
body { background-color: #121214; background-image: -webkit-linear-gradient(#121214, #343437); background-image: linear-gradient(#121214, #343437);
}
figure { position: absolute; width: 0; height: 0; left: 50%; top: 50%; margin: -60px -50px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600; -moz-perspective: 600; perspective: 600;
}
figure span { display: block; position: absolute; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
figure span:after { display: block; content: ''; border-style: solid; border-color: transparent; border-width: 100px 58px 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
figure span:nth-child(1) { -webkit-transform: rotate3d(0, 0, 1, 90deg); -moz-transform: rotate3d(0, 0, 1, 90deg); -ms-transform: rotate3d(0, 0, 1, 90deg); -o-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg);
}
figure span:nth-child(1):after { border-top-color: #eaff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.11111s ease infinite; -moz-animation: split 2s 0.11111s ease infinite; animation: split 2s 0.11111s ease infinite;
}
figure span:nth-child(2) { -webkit-transform: rotate3d(0, 0, 1, 150deg); -moz-transform: rotate3d(0, 0, 1, 150deg); -ms-transform: rotate3d(0, 0, 1, 150deg); -o-transform: rotate3d(0, 0, 1, 150deg); transform: rotate3d(0, 0, 1, 150deg);
}
figure span:nth-child(2):after { border-top-color: #d5ff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.22222s ease infinite; -moz-animation: split 2s 0.22222s ease infinite; animation: split 2s 0.22222s ease infinite;
}
figure span:nth-child(3) { -webkit-transform: rotate3d(0, 0, 1, 210deg); -moz-transform: rotate3d(0, 0, 1, 210deg); -ms-transform: rotate3d(0, 0, 1, 210deg); -o-transform: rotate3d(0, 0, 1, 210deg); transform: rotate3d(0, 0, 1, 210deg);
}
figure span:nth-child(3):after { border-top-color: #bfff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.33333s ease infinite; -moz-animation: split 2s 0.33333s ease infinite; animation: split 2s 0.33333s ease infinite;
}
figure span:nth-child(4) { -webkit-transform: rotate3d(0, 0, 1, 270deg); -moz-transform: rotate3d(0, 0, 1, 270deg); -ms-transform: rotate3d(0, 0, 1, 270deg); -o-transform: rotate3d(0, 0, 1, 270deg); transform: rotate3d(0, 0, 1, 270deg);
}
figure span:nth-child(4):after { border-top-color: #aaff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.44444s ease infinite; -moz-animation: split 2s 0.44444s ease infinite; animation: split 2s 0.44444s ease infinite;
}
figure span:nth-child(5) { -webkit-transform: rotate3d(0, 0, 1, 330deg); -moz-transform: rotate3d(0, 0, 1, 330deg); -ms-transform: rotate3d(0, 0, 1, 330deg); -o-transform: rotate3d(0, 0, 1, 330deg); transform: rotate3d(0, 0, 1, 330deg);
}
figure span:nth-child(5):after { border-top-color: #95ff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.55556s ease infinite; -moz-animation: split 2s 0.55556s ease infinite; animation: split 2s 0.55556s ease infinite;
}
figure span:nth-child(6) { -webkit-transform: rotate3d(0, 0, 1, 390deg); -moz-transform: rotate3d(0, 0, 1, 390deg); -ms-transform: rotate3d(0, 0, 1, 390deg); -o-transform: rotate3d(0, 0, 1, 390deg); transform: rotate3d(0, 0, 1, 390deg);
}
figure span:nth-child(6):after { border-top-color: #80ff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.66667s ease infinite; -moz-animation: split 2s 0.66667s ease infinite; animation: split 2s 0.66667s ease infinite;
}
@-webkit-keyframes split { 0% { -webkit-transform-origin: 50% 100%; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); } 25% { -webkit-transform-origin: 50% 100%; -webkit-transform: rotate3d(0, 1, 0, 360deg); } 50% { opacity: 1; -webkit-transform-origin: 100% 0%; -webkit-transform: rotate3d(0, 1, 0, 360deg); } 75% { opacity: 0; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); } 100% { opacity: 1; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); }
}
@-moz-keyframes split { 0% { -moz-transform-origin: 50% 100%; -moz-transform: rotate3d(0.5, 1, 0, 180deg); } 25% { -moz-transform-origin: 50% 100%; -moz-transform: rotate3d(0, 1, 0, 360deg); } 50% { opacity: 1; -moz-transform-origin: 100% 0%; -moz-transform: rotate3d(0, 1, 0, 360deg); } 75% { opacity: 0; -moz-transform: rotate3d(0.5, 1, 0, 180deg); } 100% { opacity: 1; -moz-transform: rotate3d(0.5, 1, 0, 180deg); }
}
@keyframes split { 0% { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); } 25% { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotate3d(0, 1, 0, 360deg); -moz-transform: rotate3d(0, 1, 0, 360deg); -ms-transform: rotate3d(0, 1, 0, 360deg); -o-transform: rotate3d(0, 1, 0, 360deg); transform: rotate3d(0, 1, 0, 360deg); } 50% { opacity: 1; -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: rotate3d(0, 1, 0, 360deg); -moz-transform: rotate3d(0, 1, 0, 360deg); -ms-transform: rotate3d(0, 1, 0, 360deg); -o-transform: rotate3d(0, 1, 0, 360deg); transform: rotate3d(0, 1, 0, 360deg); } 75% { opacity: 0; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); } 100% { opacity: 1; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); }
}
Pure css loader - Script Codes
Pure css loader - Script Codes
Home Page Home
Developer Martin Grand
Username martingrand
Uploaded August 11, 2022
Rating 4.5
Size 3,918 Kb
Views 36,432
Do you need developer help for Pure css loader?

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!

Martin Grand (martingrand) Script Codes
Create amazing SEO content with AI!

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!