3D Loader using CSS

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

3D loader using HTML & CSS

Here is the main CSS source code which is used to create  3D  animated loaderCheck 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.

 


.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
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH, my native place in Odisha. I am a Web Programmer by profession and working on more than 50 projects to date. My passion is working on the web-based project using PHP and relate to all CMS and frameworks which is based on PHP.
Posts created 163

3 thoughts on “3D Loader using CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
mariobet - supertotobet - escort -

takip7.com

We are now accepting Guest Posting and creation of Backlinks
This is default text for notification bar