Is there a way to add a spinner in the center of a button using CSS that adjusts its position every time the button width changes? Setting margins does not seem to work as the spinner position remains fixed and does not align with the center of the button. Here is my current output And here is the 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;
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;
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=" ic3-faspinblue"></span>
Loading
</button>I am looking for a solution to ensure that the spinner always loads at the center.