 .loader01 {   width: 56px;   height: 56px;   border: 8px solid #ad8cc1;   border-right-color: transparent;   border-radius: 50%;   position: relative;   animation: loader-rotate 1s linear infinite;   top: 50%;   margin: -28px auto 0; }   .loader01::after {     content: '';     width: 8px;     height: 8px;     background: #ad8cc1;     border-radius: 50%;     position: absolute;     top: -1px;     left: 33px; }  @keyframes loader-rotate {   0% {     transform: rotate(0); }   100% {     transform: rotate(360deg); } }  .loader02 {   width: 56px;   height: 56px;   border: 8px solid rgba(0, 82, 236, 0.25);   border-top-color: #ad8cc1;   border-radius: 50%;   position: relative;   animation: loader-rotate 1s linear infinite;   top: 50%;   margin: -28px auto 0; }  @keyframes loader-rotate {   0% {     transform: rotate(0); }   100% {     transform: rotate(360deg); } }  .loader03 {   width: 56px;   height: 56px;   border: 8px solid transparent;   border-top-color: #ad8cc1;   border-bottom-color: #ad8cc1;   border-radius: 50%;   position: relative;   animation: loader-rotate 1s linear infinite;   top: 50%;   margin: -28px auto 0; }  @keyframes loader-rotate {   0% {     transform: rotate(0); }   100% {     transform: rotate(360deg); } }  .loader04 {   width: 56px;   height: 56px;   border: 2px solid rgba(0, 82, 236, 0.5);   border-radius: 50%;   position: relative;   animation: loader-rotate 1s ease-in-out infinite;   top: 50%;   margin: -28px auto 0; }   .loader04::after {     content: '';     width: 10px;     height: 10px;     border-radius: 50%;     background: #ad8cc1;     position: absolute;     top: -6px;     left: 50%;     margin-left: -5px; }  @keyframes loader-rotate {   0% {     transform: rotate(0); }   100% {     transform: rotate(360deg); } }  .loader05 {   width: 56px;   height: 56px;   border: 4px solid #ad8cc1;   border-radius: 50%;   position: relative;   animation: loader-scale 1s ease-out infinite;   top: 50%;   margin: -28px auto 0; }  @keyframes loader-scale {   0% {     transform: scale(0);     opacity: 0; }   50% {     opacity: 1; }   100% {     transform: scale(1);     opacity: 0; } }  .loader06 {   width: 56px;   height: 56px;   border: 4px solid transparent;   border-radius: 50%;   position: relative;   top: 50%;   margin: -28px auto 0; }   .loader06::before {     content: '';     border: 4px solid rgba(0, 82, 236, 0.5);     border-radius: 50%;     width: 67.2px;     height: 67.2px;     position: absolute;     top: -9.6px;     left: -9.6px;     animation: loader-scale 1s ease-out infinite;     animation-delay: 1s;     opacity: 0; }   .loader06::after {     content: '';     border: 4px solid #ad8cc1;     border-radius: 50%;     width: 56px;     height: 56px;     position: absolute;     top: -4px;     left: -4px;     animation: loader-scale 1s ease-out infinite;     animation-delay: 0.5s; }  @keyframes loader-scale {   0% {     transform: scale(0);     opacity: 0; }   50% {     opacity: 1; }   100% {     transform: scale(1);     opacity: 0; } }  .loader07 {   width: 16px;   height: 16px;   border-radius: 50%;   position: relative;   animation: loader-circles 1s linear infinite;   top: 50%;   margin: -8px auto 0; }  @keyframes loader-circles {   0% {     box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.05), 19px -19px 0 0 rgba(0, 82, 236, 0.1), 27px 0 0 0 rgba(0, 82, 236, 0.2), 19px 19px 0 0 rgba(0, 82, 236, 0.3), 0 27px 0 0 rgba(0, 82, 236, 0.4), -19px 19px 0 0 rgba(0, 82, 236, 0.6), -27px 0 0 0 rgba(0, 82, 236, 0.8), -19px -19px 0 0 #ad8cc1; }   12.5% {     box-shadow: 0 -27px 0 0 #ad8cc1, 19px -19px 0 0 rgba(0, 82, 236, 0.05), 27px 0 0 0 rgba(0, 82, 236, 0.1), 19px 19px 0 0 rgba(0, 82, 236, 0.2), 0 27px 0 0 rgba(0, 82, 236, 0.3), -19px 19px 0 0 rgba(0, 82, 236, 0.4), -27px 0 0 0 rgba(0, 82, 236, 0.6), -19px -19px 0 0 rgba(0, 82, 236, 0.8); }   25% {     box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.8), 19px -19px 0 0 #ad8cc1, 27px 0 0 0 rgba(0, 82, 236, 0.05), 19px 19px 0 0 rgba(0, 82, 236, 0.1), 0 27px 0 0 rgba(0, 82, 236, 0.2), -19px 19px 0 0 rgba(0, 82, 236, 0.3), -27px 0 0 0 rgba(0, 82, 236, 0.4), -19px -19px 0 0 rgba(0, 82, 236, 0.6); }   37.5% {     box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.6), 19px -19px 0 0 rgba(0, 82, 236, 0.8), 27px 0 0 0 #ad8cc1, 19px 19px 0 0 rgba(0, 82, 236, 0.05), 0 27px 0 0 rgba(0, 82, 236, 0.1), -19px 19px 0 0 rgba(0, 82, 236, 0.2), -27px 0 0 0 rgba(0, 82, 236, 0.3), -19px -19px 0 0 rgba(0, 82, 236, 0.4); }   50% {     box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.4), 19px -19px 0 0 rgba(0, 82, 236, 0.6), 27px 0 0 0 rgba(0, 82, 236, 0.8), 19px 19px 0 0 #ad8cc1, 0 27px 0 0 rgba(0, 82, 236, 0.05), -19px 19px 0 0 rgba(0, 82, 236, 0.1), -27px 0 0 0 rgba(0, 82, 236, 0.2), -19px -19px 0 0 rgba(0, 82, 236, 0.3); }   62.5% {     box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.3), 19px -19px 0 0 rgba(0, 82, 236, 0.4), 27px 0 0 0 rgba(0, 82, 236, 0.6), 19px 19px 0 0 rgba(0, 82, 236, 0.8), 0 27px 0 0 #ad8cc1, -19px 19px 0 0 rgba(0, 82, 236, 0.05), -27px 0 0 0 rgba(0, 82, 236, 0.1), -19px -19px 0 0 rgba(0, 82, 236, 0.2); }   75% {     box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.2), 19px -19px 0 0 rgba(0, 82, 236, 0.3), 27px 0 0 0 rgba(0, 82, 236, 0.4), 19px 19px 0 0 rgba(0, 82, 236, 0.6), 0 27px 0 0 rgba(0, 82, 236, 0.8), -19px 19px 0 0 #ad8cc1, -27px 0 0 0 rgba(0, 82, 236, 0.05), -19px -19px 0 0 rgba(0, 82, 236, 0.1); }   87.5% {     box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.1), 19px -19px 0 0 rgba(0, 82, 236, 0.2), 27px 0 0 0 rgba(0, 82, 236, 0.3), 19px 19px 0 0 rgba(0, 82, 236, 0.4), 0 27px 0 0 rgba(0, 82, 236, 0.6), -19px 19px 0 0 rgba(0, 82, 236, 0.8), -27px 0 0 0 #ad8cc1, -19px -19px 0 0 rgba(0, 82, 236, 0.05); }   100% {     box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.05), 19px -19px 0 0 rgba(0, 82, 236, 0.1), 27px 0 0 0 rgba(0, 82, 236, 0.2), 19px 19px 0 0 rgba(0, 82, 236, 0.3), 0 27px 0 0 rgba(0, 82, 236, 0.4), -19px 19px 0 0 rgba(0, 82, 236, 0.6), -27px 0 0 0 rgba(0, 82, 236, 0.8), -19px -19px 0 0 #ad8cc1; } }  .loader08 {   width: 20px;   height: 20px;   position: relative;   animation: loader08 1s ease infinite;   top: 50%;   margin: -46px auto 0; }  @keyframes loader08 {   0%, 100% {     box-shadow: -13px 20px 0 #ad8cc1, 13px 20px 0 rgba(0, 82, 236, 0.2), 13px 46px 0 rgba(0, 82, 236, 0.2), -13px 46px 0 rgba(0, 82, 236, 0.2); }   25% {     box-shadow: -13px 20px 0 rgba(0, 82, 236, 0.2), 13px 20px 0 #ad8cc1, 13px 46px 0 rgba(0, 82, 236, 0.2), -13px 46px 0 rgba(0, 82, 236, 0.2); }   50% {     box-shadow: -13px 20px 0 rgba(0, 82, 236, 0.2), 13px 20px 0 rgba(0, 82, 236, 0.2), 13px 46px 0 #ad8cc1, -13px 46px 0 rgba(0, 82, 236, 0.2); }   75% {     box-shadow: -13px 20px 0 rgba(0, 82, 236, 0.2), 13px 20px 0 rgba(0, 82, 236, 0.2), 13px 46px 0 rgba(0, 82, 236, 0.2), -13px 46px 0 #ad8cc1; } }  .loader09 {   width: 10px;   height: 48px;   background: #ad8cc1;   position: relative;   animation: loader09 1s ease-in-out infinite;   animation-delay: 0.4s;   top: 50%;   margin: -28px auto 0; }   .loader09::after, .loader09::before {     content: '';     position: absolute;     width: 10px;     height: 48px;     background: #ad8cc1;     animation: loader09 1s ease-in-out infinite; }   .loader09::before {     right: 18px;     animation-delay: 0.2s; }   .loader09::after {     left: 18px;     animation-delay: 0.6s; }  @keyframes loader09 {   0%, 100% {     box-shadow: 0 0 0 #ad8cc1, 0 0 0 #ad8cc1; }   50% {     box-shadow: 0 -8px 0 #ad8cc1, 0 8px 0 #ad8cc1; } }  .loader10 {   width: 28px;   height: 28px;   border-radius: 50%;   position: relative;   animation: loader10 0.9s ease alternate infinite;   animation-delay: 0.36s;   top: 50%;   margin: -42px auto 0; }   .loader10::after, .loader10::before {     content: '';     position: absolute;     width: 28px;     height: 28px;     border-radius: 50%;     animation: loader10 0.9s ease alternate infinite; }   .loader10::before {     left: -40px;     animation-delay: 0.18s; }   .loader10::after {     right: -40px;     animation-delay: 0.54s; }  @keyframes loader10 {   0% {     box-shadow: 0 28px 0 -28px #ad8cc1; }   100% {     box-shadow: 0 28px 0 #ad8cc1; } }  .loader11 {   width: 20px;   height: 20px;   border-radius: 50%;   box-shadow: 0 40px 0 #ad8cc1;   position: relative;   animation: loader11 0.8s ease-in-out alternate infinite;   animation-delay: 0.32s;   top: 50%;   margin: -50px auto 0; }   .loader11::after, .loader11::before {     content: '';     position: absolute;     width: 20px;     height: 20px;     border-radius: 50%;     box-shadow: 0 40px 0 #ad8cc1;     animation: loader11 0.8s ease-in-out alternate infinite; }   .loader11::before {     left: -30px;     animation-delay: 0.48s; }   .loader11::after {     right: -30px;     animation-delay: 0.16s; }  @keyframes loader11 {   0% {     box-shadow: 0 40px 0 #ad8cc1; }   100% {     box-shadow: 0 20px 0 #ad8cc1; } }  .loader12 {   width: 20px;   height: 20px;   border-radius: 50%;   position: relative;   animation: loader12 1s linear alternate infinite;   top: 50%;   margin: -50px auto 0; }  @keyframes loader12 {   0% {     box-shadow: -60px 40px 0 2px #ad8cc1, -30px 40px 0 0 rgba(0, 82, 236, 0.2), 0 40px 0 0 rgba(0, 82, 236, 0.2), 30px 40px 0 0 rgba(0, 82, 236, 0.2), 60px 40px 0 0 rgba(0, 82, 236, 0.2); }   25% {     box-shadow: -60px 40px 0 0 rgba(0, 82, 236, 0.2), -30px 40px 0 2px #ad8cc1, 0 40px 0 0 rgba(0, 82, 236, 0.2), 30px 40px 0 0 rgba(0, 82, 236, 0.2), 60px 40px 0 0 rgba(0, 82, 236, 0.2); }   50% {     box-shadow: -60px 40px 0 0 rgba(0, 82, 236, 0.2), -30px 40px 0 0 rgba(0, 82, 236, 0.2), 0 40px 0 2px #ad8cc1, 30px 40px 0 0 rgba(0, 82, 236, 0.2), 60px 40px 0 0 rgba(0, 82, 236, 0.2); }   75% {     box-shadow: -60px 40px 0 0 rgba(0, 82, 236, 0.2), -30px 40px 0 0 rgba(0, 82, 236, 0.2), 0 40px 0 0 rgba(0, 82, 236, 0.2), 30px 40px 0 2px #ad8cc1, 60px 40px 0 0 rgba(0, 82, 236, 0.2); }   100% {     box-shadow: -60px 40px 0 0 rgba(0, 82, 236, 0.2), -30px 40px 0 0 rgba(0, 82, 236, 0.2), 0 40px 0 0 rgba(0, 82, 236, 0.2), 30px 40px 0 0 rgba(0, 82, 236, 0.2), 60px 40px 0 2px #ad8cc1; } } 