Today we create an animated 3D loader using CSS, which is pretty interesting because of that effects loading animation. Also, this is called waiting animation, when any user going to your website and click on any link than that page opening time covers that 3D loader or preloader.
Check below for LIVE VIEW
Here is the main CSS source code which is used to create 3D animated loader. Check below code step by step,
3D Loader Animation CSS code Snippet
On CSS source we use animation CSS property for animation with 4.5s with infinite time.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.loader span { position: absolute; display: block; border: 15px solid #2d2613; box-sizing: border-box; border-radius: 50%; box-shadow: 0 10px 0 #e05113, inset 0 10px 0 #e62a2a; animation: animate 4.5s ease-in-out infinite; } .loader span:nth-child(1) { animation-delay: 0s; } .loader span:nth-child(2) { animation-delay: 1.5s; } .loader span:nth-child(3) { animation-delay: 3s; } @keyframes animate { 0%{ transform: translateZ(-100px); width: 100%; height: 100%; } 25%{ transform: translateZ(100px); width: 100%; height: 100%; } 50%{ transform: translateZ(100px); width: 35%; height: 35%; } 75%{ transform: translateZ(-100px); width: 35%; height: 35%; } 100%{ transform: translateZ(-100px); width: 100%; height: 100%; } |
See the Pen
3d Loader Using CSS by Bikash Panda (@phpcodertech)
on CodePen.
Also, check:
Character walking animation Using CSS3 and HTML
Happy Coding..!
Was this article helpful?
YesNo
Integrate Google reCaptcha in Codeigniter
4 Replies to “3D Loader using CSS”