Add Loader/Spinner at center of a button - css

Question

I want to add a spinner at the center of my button using CSS.The spinner should load at the center everytime the width of button changes. If i set margins the spinner position remains same and it does not change with the button text and does not align to center.
My Output
Expected Output
.ic2-fa-spin-blue {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
border: 3px solid #008ad6;
border-radius: 50%;
border-top: 3px solid #f3f3f3;
width: 20px;
height: 20px;
-webkit-animation: ic2-spin 2s linear infinite; /* Safari */
animation: ic2-spin 2s linear infinite;
-moz-animation: ic2-spin 2s infinite linear;
-o-animation: ic2-spin 2s infinite linear;
/*position: absolute;
/*margin-left:1em;*/
/*margin-top: 6px;
margin-right: auto;
margin-left: auto;*/
display: block;
position: absolute;
}
#-webkit-keyframes ic2-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes ic2-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ic2-outlined-spin-blue-btn {
color: #a3deff;
border: 1px solid #008ad6;
}
.ic2-outlined-btn {
border-radius: 3px;
background-color: var(--white-color);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.05);
font-family: Roboto;
font-size: 17px;
font-weight: 500;
/*line-height: 32px;*/
text-align: var(--button-alignment);
padding: 0px 16px;
border-radius: 3px;
width: auto;
word-spacing: 8px;
height:32px;
}
<button value="Loading" class="ic2-outlined-btn ic2-outlined-spin-blue-btn ">
<span class=" ic2-fa-spin-blue"></span>
Loading
</button>
I want the spinner to load at center .

Answer 1

You can position the spinner using top: calc(50% - 13px); left: calc(50% - 13px);. The 50% is measured from the parent, and 13px since the width/height of the spinner is 20px and border adds 6px to a total of 26px, and half of it is 13px.
Also set position: relative on the button .ic2-outlined-spin-blue-btn, so it will be the positioning context (the parent).
.ic2-fa-spin-blue {
border: 3px solid #008ad6;
border-radius: 50%;
border-top: 3px solid #f3f3f3;
width: 20px;
height: 20px;
display: block;
position: absolute;
top: calc(50% - 13px);
left: calc(50% - 13px);
animation: ic2-spin 2s linear infinite;
}
#keyframes ic2-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ic2-outlined-spin-blue-btn {
position: relative;
color: #a3deff;
border: 1px solid #008ad6;
}
.ic2-outlined-btn {
border-radius: 3px;
background-color: var(--white-color);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
font-family: Roboto;
font-size: 17px;
font-weight: 500;
/*line-height: 32px;*/
text-align: var(--button-alignment);
padding: 0px 16px;
border-radius: 3px;
width: auto;
word-spacing: 8px;
height: 32px;
}
<button value="Loading" class="ic2-outlined-btn ic2-outlined-spin-blue-btn ">
<span class=" ic2-fa-spin-blue"></span>
Loading
</button>

Answer 2

Add position:relative to .ic2-outlined-btn class.
Add this style to .ic2-fa-spin-blue class.
right: calc(50% - 15px);
top: 2px;