preloader style : demo 73

HTML

                        

CSS

                        .demo{
                            background: #00a9a6;
                        }
                        .loader{
                            width: 200px;
                            height: 200px;
                            position: relative;
                            transform: rotate(45deg);
                            margin: 50px auto;
                        }
                        .loader > div{
                            width: 50px;
                            height: 50px;
                            background: rgba(255,255,255,0);
                            border: 2px solid #ffe1d8;
                            position: absolute;
                            top: 73px;
                            left: 73px;
                        }
                        .loader .loader-inner-1{
                            animation: loading-3 1s infinite ease-in-out;
                        }
                        .loader .loader-inner-2{
                            animation: loading-1 1s forwards,
                            loading-4 1s infinite ease-in-out;
                        }
                        .loader .loader-inner-3{
                            animation: loading-2 1s forwards,
                            loading-5 1s infinite ease-in-out;
                        }
                        @-webkit-keyframes loading-1{
                            100%{
                                width: 100px;
                                height:100px;
                                left: 48px;
                                top: 48px;
                            }
                        }
                        @keyframes loading-1{
                            100%{
                                width: 100px;
                                height:100px;
                                left: 48px;
                                top: 48px;
                            }
                        }
                        @-webkit-keyframes loading-2{
                            100%{
                                width: 150px;
                                height: 150px;
                                left: 23px;
                                top: 23px;
                            }
                        }
                        @keyframes loading-2{
                            100%{
                                width: 150px;
                                height: 150px;
                                left: 23px;
                                top: 23px;
                            }
                        }
                        @-webkit-keyframes loading-3{
                            0%   { transform: perspective(100px) rotateX(0deg) rotateY(0deg);}
                            50%  { transform: perspective(100px) rotateX(-180deg) rotateY(0deg); }
                            100% { transform: perspective(100px) rotateX(-180deg) rotateY(-180deg); }
                        }
                        @keyframes loading-3{
                            0%   { transform: perspective(100px) rotateX(0deg) rotateY(0deg);}
                            50%  { transform: perspective(100px) rotateX(-180deg) rotateY(0deg); }
                            100% { transform: perspective(100px) rotateX(-180deg) rotateY(-180deg); }
                        }
                        @-webkit-keyframes loading-4{
                            0%   { transform: perspective(200px) rotateX(0deg) rotateY(0deg); }
                            50%  { transform: perspective(200px) rotateX(180deg) rotateY(0deg); }
                            100% { transform: perspective(200px) rotateX(180deg) rotateY(180deg); }
                        }
                        @keyframes loading-4{
                            0%   { transform: perspective(200px) rotateX(0deg) rotateY(0deg); }
                            50%  { transform: perspective(200px) rotateX(180deg) rotateY(0deg); }
                            100% { transform: perspective(200px) rotateX(180deg) rotateY(180deg); }
                        }
                        @-webkit-keyframes loading-5{
                            0%   { transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
                            50%  { transform: perspective(300px) rotateX(-180deg) rotateY(0deg); }
                            100% { transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
                        }
                        @keyframes loading-5{
                            0%   { transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
                            50%  { transform: perspective(300px) rotateX(-180deg) rotateY(0deg); }
                            100% { transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
                        }
                    
License Terms