I have tried to make css animation small and responsive but I seem to can't figure it out. I tried changing the main width from 80px to something smaller but it messes with the positions also. I have tried also setting the button to position absolute and the children to relative but didn't get the outcome I was looking for. If change the button size to be smaller it cuts off half of the animation instead of making shrinking its size to fit inside the button.

I'm trying to make it look similar to something like this!

button {
  background-color: #000;
  color: #fff;
}

.lds-facebook {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #fff;
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}

.lds-facebook div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}

.lds-facebook div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}

@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
  }
  50%,
  100% {
    top: 24px;
    height: 32px;
  }
}

<button>
  <div class="lds-facebook">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
  Processing
</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

This is similar to what you did. I will modify it more but as you can see I changed all of your sizes to be percentages, that is, dependent on the size of the .lda-facebook div size. I also put the processing text into a div to allow it to be displayed in flex. If you want your stuff to be resizable you just need to base it all on relative size not absolute values.

EDIT

I also filled out the containers with the height and width making them proportional to their spaces.

button {
  background-color: #000;
  display: flex;
  color: #fff;
}

.lds-facebook {
  display: flex;
  position: relative;
  width: 40px;
  height: 35px;
}


/* Made position relative, used margin-left for spacing.
   Also have them all equal width to fill the container    
*/
.lds-facebook div {
  display: inline-block;
  position: relative;
  margin-left: 10%;
  width: 33%;
  background: #fff;
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-facebook div:nth-child(1) {
  animation-delay: -0.24s;
}

.lds-facebook div:nth-child(2) {
  animation-delay: -0.12s;
}

.lds-facebook div:nth-child(3) {
  animation-delay: 0;
}

/* Set some margin to the text to give spacing
   and aligned it to the center.
*/
.proc-text {
   margin-left: 5%;
   align-self: center;
}

/* Changed to use 100% of the height to again fill out
   the entire container
*/
 
@keyframes lds-facebook {
  0% {
    top: 8%;
    height: 100%;
  }
  50%,
  100% {
    top: 24%;
    height: 50%;
  }
}

<button>
  <div class="lds-facebook">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="proc-text">
      Processing
  </div>
</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

SMALLER VERSION

If the processing div is placed before then, naturally, it will come before. I also shrunk the overall size which made the animation smaller but allowed for a nice compact look for the button.

button {
  background-color: #000;
  display: flex;
  color: #fff;
}

.lds-facebook {
  display: flex;
  position: relative;
  align-items: center;
  width: 40px;
  height: 10px;
}


/* Made position relative, used margin-left for spacing.
   Also have them all equal width to fill the container    
*/
.lds-facebook div {
  display: inline-block;
  position: relative;
  margin-left: 10%;
  width: 33%;
  background: #fff;
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-facebook div:nth-child(1) {
  animation-delay: -0.24s;
}

.lds-facebook div:nth-child(2) {
  animation-delay: -0.12s;
}

.lds-facebook div:nth-child(3) {
  animation-delay: 0;
}

/* Set some margin to the text to give spacing
   and aligned it to the center.
*/
.proc-text {
   margin-left: 5%;
   align-self: center;
}

/* Changed to use 100% of the height to again fill out
   the entire container
*/
 
@keyframes lds-facebook {
  0% {
    top: -8%;
    height: 100%;
  }
  50%,
  100% {
    top: 16%;
    height: 50%;
  }
}

<button>
<div class="proc-text">
      Processing
  </div>
  <div class="lds-facebook">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
</button>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>