preloader style : demo 287

HTML

                        

CSS

                        :root{
                            --s: calc(200px / 25);
                            --b: calc(200px / 20);
                        }
                        .loader{
                            width: 200px;
                            height: 200px;
                            margin: 0 auto;
                            transform: rotate(175deg);
                            position: relative;
                        }
                        .loader span{
                            border: var(--s) solid #e7e7e7;
                            border-top: var(--s) solid hsl(calc(21 * var(--i)), 89%, 50%);
                            border-left: var(--s) solid hsl(calc(21 * var(--i)), 89%, 50%);
                            border-radius: 50%;
                            position: absolute;
                            top: calc(var(--b) * var(--i));
                            bottom: calc(var(--b) * var(--i));
                            left: calc(var(--b) * var(--i));
                            right: calc(var(--b) * var(--i));
                            animation: animate 1000ms alternate ease-in-out infinite;
                            animation-delay: calc(-0.1s * var(--i));
                        }
                        .loader span:nth-child(1){ --i: 0; }
                        .loader span:nth-child(2){ --i: 1; }
                        .loader span:nth-child(3){ --i: 2; }
                        .loader span:nth-child(4){ --i: 3; }
                        .loader span:nth-child(5){ --i: 4; }
                        .loader span:nth-child(6){ --i: 5; }
                        .loader span:nth-child(7){ --i: 6; }
                        .loader span:nth-child(8){ --i: 7; }
                        .loader span:nth-child(9){ --i: 8; }
                        .loader span:nth-child(10){ --i: 9; }
                        @keyframes animate{
                            0%{ transform: rotate(0deg); }
                            100%{ transform: rotate(90deg); }
                        }
                    
License Terms