preloader style : demo 82

HTML

                        

CSS

                        .demo{
                            background: #003f5b;
                        }
                        .loader{
                            width: 140px;
                            height: 140px;
                            text-align: center;
                            padding: 25px;
                            margin: 30px auto;
                        }
                        .loader .loader-inner{
                            width: 80px;
                            height: 80px;
                            border: 4px solid #ff9420;
                            position: relative;
                            -webkit-animation: loading-2 3s infinite linear;
                            animation: loading-2 3s infinite linear;
                        }
                        .loader .loader-inner:before{
                            content: "";
                            width: 60px;
                            height: 60px;
                            border: 4px solid #ff9420;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            -webkit-transform: translate(-50%, -50%);
                            transform: translate(-50%, -50%);
                            -webkit-animation: loading-1 1.5s infinite ease;
                            animation: loading-1 1.5s infinite ease;
                        }
                        @-webkit-keyframes loading-1{
                            50%{ border-width: 30px; }
                        }
                        @keyframes loading-1{
                            50%{ border-width: 30px; }
                        }
                        @-webkit-keyframes loading-2{
                            100%{
                                -webkit-transform: rotate(360deg);
                                transform: rotate(360deg);
                            }
                        }
                        @keyframes loading-2{
                            100%{
                                -webkit-transform: rotate(360deg);
                                transform: rotate(360deg);
                            }
                        }
                    
License Terms