github.com/outbrain/consul@v1.4.5/ui-v2/app/styles/components/product/loader.scss (about)

     1  /* logo */
     2  %brand-loader {
     3    display: block;
     4  }
     5  %brand-loader {
     6    position: absolute;
     7    top: 50%;
     8    margin-top: -26px;
     9    left: 50%;
    10    margin-left: -84px;
    11  }
    12  /* blobs / %ui-loader ? */
    13  %loader {
    14    display: flex;
    15    align-items: center;
    16    justify-content: center;
    17    height: calc(100vh - 90px - 48px - 50px);
    18  }
    19  %loader circle {
    20    animation: loader-animation 1.5s infinite ease-in-out;
    21    transform-origin: 50% 50%;
    22  }
    23  
    24  %loader g:nth-last-child(2) circle {
    25    animation-delay: 0.2s;
    26  }
    27  
    28  %loader g:nth-last-child(3) circle {
    29    animation-delay: 0.3s;
    30  }
    31  
    32  %loader g:nth-last-child(4) circle {
    33    animation-delay: 0.4s;
    34  }
    35  
    36  %loader g:nth-last-child(5) circle {
    37    animation-delay: 0.5s;
    38  }
    39  
    40  @keyframes loader-animation {
    41    0%,
    42    100% {
    43      transform: scale3D(1, 1, 1);
    44    }
    45  
    46    33% {
    47      transform: scale3D(0, 0, 1);
    48    }
    49  }