preloader style : demo 204

HTML

                        

CSS

                      .demo{background-color: #11111f;}
                      .loader{
                          width: 5em;
                          height: 13em;
                          font-size: 10px;
                          display: flex;
                          flex-direction: column;
                          margin: 50px auto;
                      }
                      .loader::before {
                          content: '';
                          width: 5em;
                          height: 5em;
                          background-color: #F0C808;
                          border-radius: 50%;
                          animation: ball-jumping 1s ease-in-out infinite;
                      }
                      .loader::after {
                          content: '';
                          width: 5em;
                          height: 8em;
                          background-color: #03a4da;
                          border-radius: 0.5em;
                          animation: rect-rotating 1s ease-in-out infinite;
                      }
                      @keyframes ball-jumping {
                          20%, 80% {transform: translateY(-2em);}
                          50% {transform: translateY(calc((8em - 5em) / 2));}
                      }
                      @keyframes rect-rotating {
                          50% {transform: rotate(90deg);}
                          100% {transform: rotate(180deg);}
                      }
                    
License Terms