Pure css loader

Developer
Martin Grand
Size
3,918 Kb
Views
36,432
  1. Pure css loader Previews
  2. Pure css loader HTML Codes
  3. Pure css loader CSS Codes

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
IQ Test

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
Name
Birthday Cake
Pure css christmas tree
Switch
BEM class name preprocess
Animated captcha concept
The easiest way to centering a fluid element vertically, and horizontally
Coming soon page for pixelbrain.io
3d mosaic, with any image from your computer
Clock
A Pen by Martin Grand
Create amazing captions 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!