preloader style : demo 225

HTML

                        

CSS

                        :root{
                            --name: quick-glow;
                            --time: 2.5s;
                            --count: infinite;
                            --direction: linear;
                        }
                        .demo{ background-color: #130f40; }
                        .loader{
                            width: 100px;
                            height: 100px;
                            margin: 50px auto 0;
                        }
                        .loader .box{
                            background: #5c002e;
                            width: 10px;
                            height: 10px;
                            margin: 2px;
                            border-radius: 50%;
                            display: inline-block;
                        }
                        .box:nth-child(1){ animation: var(--name) var(--time) 0s var(--count)  var(--direction); }
                        .box:nth-child(2){ animation: var(--name) var(--time) 0.1s var(--count)  var(--direction); }
                        .box:nth-child(3){ animation: var(--name) var(--time) 0.2s var(--count)  var(--direction); }
                        .box:nth-child(4){ animation: var(--name) var(--time) 0.3s var(--count)  var(--direction); }
                        .box:nth-child(5){ animation: var(--name) var(--time) 0.4s var(--count)  var(--direction); }
                        .box:nth-child(6){ animation: var(--name) var(--time) 1.5s var(--count)  var(--direction); }
                        .box:nth-child(7){ animation: var(--name) var(--time) 1.6s var(--count)  var(--direction); }
                        .box:nth-child(8){ animation: var(--name) var(--time) 1.7s var(--count)  var(--direction); }
                        .box:nth-child(9){ animation: var(--name) var(--time) 1.8s var(--count)  var(--direction); }
                        .box:nth-child(10){ animation: var(--name) var(--time) 0.5s var(--count)  var(--direction); }
                        .box:nth-child(11){ animation: var(--name) var(--time) 1.4s var(--count)  var(--direction); }
                        .box:nth-child(12){ animation: var(--name) var(--time) 2.3s var(--count)  var(--direction); }
                        .box:nth-child(13){ animation: var(--name) var(--time) 2.4s var(--count)  var(--direction); }
                        .box:nth-child(14){ animation: var(--name) var(--time) 1.9s var(--count)  var(--direction); }
                        .box:nth-child(15){ animation: var(--name) var(--time) 0.6s var(--count)  var(--direction); }
                        .box:nth-child(16){ animation: var(--name) var(--time) 1.3s var(--count)  var(--direction); }
                        .box:nth-child(17){ animation: var(--name) var(--time) 2.2s var(--count)  var(--direction); }
                        .box:nth-child(18){ animation: var(--name) var(--time) 2.1s var(--count)  var(--direction); }
                        .box:nth-child(19){ animation: var(--name) var(--time) 2s var(--count)  var(--direction); }
                        .box:nth-child(20){ animation: var(--name) var(--time) 0.7s var(--count)  var(--direction); }
                        .box:nth-child(21){ animation: var(--name) var(--time) 1.2s var(--count)  var(--direction); }
                        .box:nth-child(22){ animation: var(--name) var(--time) 1.1s var(--count)  var(--direction); }
                        .box:nth-child(23){ animation: var(--name) var(--time) 1s var(--count)  var(--direction); }
                        .box:nth-child(24){ animation: var(--name) var(--time) 0.9s var(--count)  var(--direction); }
                        .box:nth-child(25){ animation: var(--name) var(--time) 0.8s var(--count)  var(--direction); }
                        @keyframes quick-glow{
                           15%{
                                background: #FF2995;
                                box-shadow: 0 0 10px 2px #FF2995;
                                z-index: 99;
                            }
                        }
                    
License Terms