a form a button and a spinning loader inside - html

Question

I have two elements in which I want to mix them together, a button and a simple loader. each element works fine alone but I want to have them together so that the loader be positioned at the center of the button and still the style of the form doesn't ruin...
Here is the loader alone:
Note that if disabled class is attached to submit-container the loader would be visible:
.btn {
font-family: "IRANSansWeb";
max-width: 200px;
width: 100%;
height: 40px;
font-weight: 600;
margin: 5px 0;
margin-top: 15px;
cursor: pointer;
opacity: 1;
background: linear-gradient(to right, #9672fb, #d772fb);
border-radius: 30px;
border: none;
color: white;
box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
transition: 0.2s;
}
.submit-container:not(.disabled) .btn:active {
transform: translateY(5px) !important;
box-shadow: none !important;
}
.submit-container:not(.disabled) .btn:hover {
transform: translateY(1px);
box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}
.submit-container.disabled .submit {
opacity: 0.5;
cursor: default;
}
.submit-container.disabled .spinner {
display: inline-block;
}
.submit-container {
display: flex;
flex-direction: row;
max-width: 200px;
width: 100%;
position: relative;
}
.modal .submit-container {
height: 70px;
}
.spinner {
font-size: 20px;
position: absolute;
display: none;
width: 1em;
height: 1em;
}
.spinner.center {
left: 8%;
top: 50%;
margin-top: -5px;
}
.spinner-blade {
position: absolute;
left: 0.4629em;
bottom: 0;
width: 0.074em;
height: 0.2777em;
border-radius: 0.5em;
background-color: transparent;
transform-origin: center -0.2222em;
-webkit-animation: spinner-fade 1s infinite linear;
animation: spinner-fade 1s infinite linear;
}
.spinner-blade:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
transform: rotate(0deg);
}
.spinner-blade:nth-child(2) {
-webkit-animation-delay: 0.083s;
animation-delay: 0.083s;
transform: rotate(30deg);
}
.spinner-blade:nth-child(3) {
-webkit-animation-delay: 0.166s;
animation-delay: 0.166s;
transform: rotate(60deg);
}
.spinner-blade:nth-child(4) {
-webkit-animation-delay: 0.249s;
animation-delay: 0.249s;
transform: rotate(90deg);
}
.spinner-blade:nth-child(5) {
-webkit-animation-delay: 0.332s;
animation-delay: 0.332s;
transform: rotate(120deg);
}
.spinner-blade:nth-child(6) {
-webkit-animation-delay: 0.415s;
animation-delay: 0.415s;
transform: rotate(150deg);
}
.spinner-blade:nth-child(7) {
-webkit-animation-delay: 0.498s;
animation-delay: 0.498s;
transform: rotate(180deg);
}
.spinner-blade:nth-child(8) {
-webkit-animation-delay: 0.581s;
animation-delay: 0.581s;
transform: rotate(210deg);
}
.spinner-blade:nth-child(9) {
-webkit-animation-delay: 0.664s;
animation-delay: 0.664s;
transform: rotate(240deg);
}
.spinner-blade:nth-child(10) {
-webkit-animation-delay: 0.747s;
animation-delay: 0.747s;
transform: rotate(270deg);
}
.spinner-blade:nth-child(11) {
-webkit-animation-delay: 0.83s;
animation-delay: 0.83s;
transform: rotate(300deg);
}
.spinner-blade:nth-child(12) {
-webkit-animation-delay: 0.913s;
animation-delay: 0.913s;
transform: rotate(330deg);
}
#-webkit-keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
#keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
<div class="submit-container disabled">
<div class="spinner center">
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
</div>
</div>
Now I try to have both button and loader together:
.btn {
font-family: "IRANSansWeb";
max-width: 200px;
width: 100%;
height: 40px;
font-weight: 600;
margin: 5px 0;
margin-top: 15px;
cursor: pointer;
opacity: 1;
background: linear-gradient(to right, #9672fb, #d772fb);
border-radius: 30px;
border: none;
color: white;
box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
transition: 0.2s;
}
.submit-container:not(.disabled) .btn:active {
transform: translateY(5px) !important;
box-shadow: none !important;
}
.submit-container:not(.disabled) .btn:hover {
transform: translateY(1px);
box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}
.submit-container.disabled .submit {
opacity: 0.5;
cursor: default;
}
.submit-container.disabled .spinner {
display: inline-block;
}
.submit-container {
display: flex;
flex-direction: row;
max-width: 200px;
width: 100%;
position: relative;
}
.modal .submit-container {
height: 70px;
}
.spinner {
font-size: 20px;
position: absolute;
display: none;
width: 1em;
height: 1em;
}
.spinner.center {
left: 8%;
top: 50%;
margin-top: -5px;
}
.spinner-blade {
position: absolute;
left: 0.4629em;
bottom: 0;
width: 0.074em;
height: 0.2777em;
border-radius: 0.5em;
background-color: transparent;
transform-origin: center -0.2222em;
-webkit-animation: spinner-fade 1s infinite linear;
animation: spinner-fade 1s infinite linear;
}
.spinner-blade:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
transform: rotate(0deg);
}
.spinner-blade:nth-child(2) {
-webkit-animation-delay: 0.083s;
animation-delay: 0.083s;
transform: rotate(30deg);
}
.spinner-blade:nth-child(3) {
-webkit-animation-delay: 0.166s;
animation-delay: 0.166s;
transform: rotate(60deg);
}
.spinner-blade:nth-child(4) {
-webkit-animation-delay: 0.249s;
animation-delay: 0.249s;
transform: rotate(90deg);
}
.spinner-blade:nth-child(5) {
-webkit-animation-delay: 0.332s;
animation-delay: 0.332s;
transform: rotate(120deg);
}
.spinner-blade:nth-child(6) {
-webkit-animation-delay: 0.415s;
animation-delay: 0.415s;
transform: rotate(150deg);
}
.spinner-blade:nth-child(7) {
-webkit-animation-delay: 0.498s;
animation-delay: 0.498s;
transform: rotate(180deg);
}
.spinner-blade:nth-child(8) {
-webkit-animation-delay: 0.581s;
animation-delay: 0.581s;
transform: rotate(210deg);
}
.spinner-blade:nth-child(9) {
-webkit-animation-delay: 0.664s;
animation-delay: 0.664s;
transform: rotate(240deg);
}
.spinner-blade:nth-child(10) {
-webkit-animation-delay: 0.747s;
animation-delay: 0.747s;
transform: rotate(270deg);
}
.spinner-blade:nth-child(11) {
-webkit-animation-delay: 0.83s;
animation-delay: 0.83s;
transform: rotate(300deg);
}
.spinner-blade:nth-child(12) {
-webkit-animation-delay: 0.913s;
animation-delay: 0.913s;
transform: rotate(330deg);
}
#-webkit-keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
#keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
.settings-input label{
align-self: flex-start;
margin-bottom: 3px;
font-size: 13px;
color: #a697bb;
}
.settings-input .input-field {
display: flex;
flex-direction: column;
margin: 15px;
}
.settings-input div,
.settings-input .input-field,
.settings-input input {
position: relative;
}
.settings-input .container {
width: 300px;
display: flex;
align-items: center;
}
.settings-input button {
text-align: center;
font-family: "IRANSansWeb_Light";
font-size: 11.5px;
position: absolute;
left: 0;
background-color: #8f7cff;
outline: none;
border: none;
color: #00eff3;
cursor: pointer;
padding: 3.5px 0;
direction: ltr;
width: 3rem;
}
.settings-input button:hover {
color: white;
background-color: #9e91ef;
}
.settings-input input {
font-family: "Open Sans";
font-size: 13px;
display: inline-block;
direction: ltr;
text-align: center;
outline: none;
width: 300px;
background: #edc3ff4a;
color: #743db0;
padding: 4px 4px;
border-radius: 3px;
border: solid 1px;
border-color: transparent;
transition: all 0.3s ease-in;
padding-left: 1.2rem;
}
.settings-input input:focus {
color: #8e5bc5;
background: #fff;
border-color: #e38fff;
}
<div class="settings-input">
<div class="input-field">
<label>phone</label>
<div id="phone-input" class="container">
<input type="text" placeholder="enter your phone" />
<div class="submit-container disabled">
<div class="spinner center">
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
</div>
<button>apply</button>
</div>
</div>
</div>
<div class="input-field">
<label>email</label>
<div id="email-input" class="container">
<input type="email" placeholder="enter your email" />
<button>apply</button>
</div>
</div>
</div>
As you see the style of the form ruins and even the loader distortion occurs...
I just want to place the loader at the center of the button without ruining the form style..
How can I do this?

Answer 1

I did not improve the code as much as I had written in the comment. But this just fixes your issue. You can improve the layout a bit more later on.
The issue is that position: relative will create a new layout context. In this context, everything can be layered along the z-axis and all the child elements that have position: absolute will refer to the nearest relative parent. Therefore, you get this distortion effect.
Removed this ...
.settings-input div,
.settings-input .input-field,
.settings-input input {
position: relative;
}
Added that ...
button { [...] position: relative; }
And I moved the spinner inside the button.
Here you go:
.btn {
font-family: "IRANSansWeb";
max-width: 200px;
width: 100%;
height: 40px;
font-weight: 600;
margin: 5px 0;
margin-top: 15px;
cursor: pointer;
opacity: 1;
background: linear-gradient(to right, #9672fb, #d772fb);
border-radius: 30px;
border: none;
color: white;
box-shadow: 0px 5px 10px -3px rgb(0 0 0 / 37%);
transition: 0.2s;
}
.submit-container:not(.disabled) .btn:active {
transform: translateY(5px) !important;
box-shadow: none !important;
}
.submit-container:not(.disabled) .btn:hover {
transform: translateY(1px);
box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 30%);
}
.submit-container.disabled .submit {
opacity: 0.5;
cursor: default;
}
.submit-container.disabled .spinner {
display: inline-block;
}
.submit-container {
display: flex;
flex-direction: row;
max-width: 200px;
width: 100%;
position: relative;
}
.modal .submit-container {
height: 70px;
}
.spinner {
font-size: 20px;
position: absolute;
display: none;
width: 1em;
height: 1em;
}
.spinner.center {
left: 8%;
top: 50%;
transform: translateY(-50%)
}
.spinner-blade {
position: absolute;
left: 0.4629em;
bottom: 0;
width: 0.074em;
height: 0.2777em;
border-radius: 0.5em;
background-color: transparent;
transform-origin: center -0.2222em;
-webkit-animation: spinner-fade 1s infinite linear;
animation: spinner-fade 1s infinite linear;
}
.spinner-blade:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
transform: rotate(0deg);
}
.spinner-blade:nth-child(2) {
-webkit-animation-delay: 0.083s;
animation-delay: 0.083s;
transform: rotate(30deg);
}
.spinner-blade:nth-child(3) {
-webkit-animation-delay: 0.166s;
animation-delay: 0.166s;
transform: rotate(60deg);
}
.spinner-blade:nth-child(4) {
-webkit-animation-delay: 0.249s;
animation-delay: 0.249s;
transform: rotate(90deg);
}
.spinner-blade:nth-child(5) {
-webkit-animation-delay: 0.332s;
animation-delay: 0.332s;
transform: rotate(120deg);
}
.spinner-blade:nth-child(6) {
-webkit-animation-delay: 0.415s;
animation-delay: 0.415s;
transform: rotate(150deg);
}
.spinner-blade:nth-child(7) {
-webkit-animation-delay: 0.498s;
animation-delay: 0.498s;
transform: rotate(180deg);
}
.spinner-blade:nth-child(8) {
-webkit-animation-delay: 0.581s;
animation-delay: 0.581s;
transform: rotate(210deg);
}
.spinner-blade:nth-child(9) {
-webkit-animation-delay: 0.664s;
animation-delay: 0.664s;
transform: rotate(240deg);
}
.spinner-blade:nth-child(10) {
-webkit-animation-delay: 0.747s;
animation-delay: 0.747s;
transform: rotate(270deg);
}
.spinner-blade:nth-child(11) {
-webkit-animation-delay: 0.83s;
animation-delay: 0.83s;
transform: rotate(300deg);
}
.spinner-blade:nth-child(12) {
-webkit-animation-delay: 0.913s;
animation-delay: 0.913s;
transform: rotate(330deg);
}
#-webkit-keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
#keyframes spinner-fade {
0% {
background-color: #51386b;
}
100% {
background-color: transparent;
}
}
.settings-input label {
align-self: flex-start;
margin-bottom: 3px;
font-size: 13px;
color: #a697bb;
}
.settings-input .input-field {
display: flex;
flex-direction: column;
margin: 15px;
}
.settings-input .container {
width: 300px;
display: flex;
align-items: center;
}
.settings-input button {
text-align: center;
font-family: "IRANSansWeb_Light";
font-size: 11.5px;
position: relative;
left: 0;
background-color: #8f7cff;
outline: none;
border: none;
color: #00eff3;
cursor: pointer;
padding: 3.5px 0;
direction: ltr;
width: 3rem;
}
.settings-input button:hover {
color: white;
background-color: #9e91ef;
}
.settings-input input {
font-family: "Open Sans";
font-size: 13px;
direction: ltr;
text-align: center;
outline: none;
width: 300px;
background: #edc3ff4a;
color: #743db0;
padding: 4px 4px;
border-radius: 3px;
border: solid 1px;
border-color: transparent;
transition: all 0.3s ease-in;
padding-left: 1.2rem;
box-sizing: border-box;
}
.settings-input input:focus {
color: #8e5bc5;
background: #fff;
border-color: #e38fff;
}
<div class="settings-input">
<div class="input-field">
<label>phone</label>
<div id="phone-input" class="container">
<input type="text" placeholder="enter your phone" />
<div class="submit-container disabled">
<button>
<div class="spinner center">
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
<div class="spinner-blade"></div>
</div>
<span>apply</span>
</button>
</div>
</div>
</div>
<div class="input-field">
<label>email</label>
<div id="email-input" class="container">
<input type="email" placeholder="enter your email" />
<button>apply</button>
</div>
</div>
</div>