gooey_collections/dist/components/collapse_loader/collapse_loader.css

Gooery collection will give button, loader, slider, radio button UI.

.Loader {
    width: 190px;
    height: 190px;
    position: relative;
    padding: 24px;
    filter: url("#tooltip-filter");
    transform: rotate(0deg);
    -webkit-animation: rotate 5s forwards infinite linear;
            animation: rotate 5s forwards infinite linear;
  }
  
  .Loader-circle,
  .Loader-blob {
    position: absolute;
  }
  
  .Loader-circle {
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #FF0068;
  }
  
  .Loader-blob {
    width: 56px;
    height: 56px;
    bottom: 24px;
    left: 24px;
    -webkit-animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
            animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  }
  
  .Loader-blob::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #FF0068;
    border-radius: 50%;
    position: absolute;
    -webkit-animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64) alternate;
            animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64) alternate;
  }
  
  .Loader-blob::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #FF0068;
    border-radius: 50%;
    position: absolute;
    -webkit-animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64) 2.5s;
            animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64) 2.5s;
  }
  
  @-webkit-keyframes xAxis {
    50% {
      -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
              animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
      transform: translateX(134px);
    }
  }
  
  @keyframes xAxis {
    50% {
      -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
              animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
      transform: translateX(134px);
    }
  }
  @-webkit-keyframes yAxis {
    50% {
      -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
              animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
      transform: translateY(-134px);
    }
  }
  @keyframes yAxis {
    50% {
      -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
              animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
      transform: translateY(-134px);
    }
  }
  @-webkit-keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }