preloader style : demo 307

HTML

                        

CSS

                        .loader{
                            width: 150px;
                            height: 50px;
                            margin: 50px auto 0;
                            border-bottom: 4px solid #555;
                            position: relative;
                            animation: animate 3s infinite linear;
                        }
                        .loader:before{
                            content: '';
                            background: #10ac84;
                            width: 40px;
                            height: 45px;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            z-index: 1;
                            clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
                            animation: animate1 3s infinite linear;
                        }
                        @keyframes animate{
                            0%,100%{ transform: rotate(-20deg); }
                            50%{ transform: rotate(20deg); }
                        }
                        @keyframes animate1{
                            0%,100%{
                                transform: rotate(0);
                                left: 0;
                            }
                            50%{
                                transform: rotate(200deg);
                                left: calc(100% - 40px);
                            }
                        }
                    
License Terms