#html #css
Вопрос:
Я пытаюсь выровнять загружаемое изображение (CSS) рядом с кнопкой. Я попытался воспользоваться справкой STO, но изображение по — прежнему не отображается рядом с кнопкой.
Вот Jsfiddle
#loading-bar-spinner.spinner {
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -20px;
position: absolute;
z-index: 19 !important;
animation: loading-bar-spinner 400ms linear infinite;
}
#loading-bar-spinner.spinner .spinner-icon {
width: 20px;
height: 20px;
border: solid 4px transparent;
border-top-color: #E4002B !important;
border-left-color: #E4002B !important;
border-radius: 50%;
float: left;
}
@keyframes loading-bar-spinner {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
<form name="sample_data" class="form2">
<label for="fname">First Name</label>
<input name="fname" id="fname_id" type="text"><br />
<label for="lname">Last Name</label>
<input name="lname" id="lname_id" type="text">
<input type="submit" class="sfmc_btn" id="subm_sfmc" value="submit">
<div id="loading-bar-spinner" class="spinner">
<div class="spinner-icon"></div>
</div>
</form>
Ответ №1:
Решение состоит в том, чтобы обернуть кнопку и счетчик вместе в элемент с встроенным блоком отображения, а затем обернуть сам счетчик в элемент с встроенным блоком отображения.
Пожалуйста, ознакомьтесь с Jsfiddle
$(document).ready(
$(function() {
$("#loading-bar-spinner").show();
$('form:not(.form2)').submit(function(e) {
e.preventDefault();
if ($(".form1").validate().checkForm()) {
$(this).find('input[type=submit]').prop('disabled', true);
$(this).find('input[type=submit]').prop('value', 'Please wait...');
}
});
$(".form2").submit(function(e) {
e.preventDefault();
if ($(".form2").validate().checkForm()) {
$(this).find('input[type=submit]').prop('disabled', true);
//$(this).find('input[type=submit]').prop('value', 'submit');
$("#loading-bar-spinner").show();
}
});
})
);
#loading-bar-spinner.spinner {
/* left: 50%; */
/* margin-left: -20px; */
top: 50%;
margin-top: -20px;
position: absolute;
z-index: 19 !important;
animation: loading-bar-spinner 400ms linear infinite;
}
#loading-bar-spinner.spinner .spinner-icon {
width: 20px;
height: 20px;
border: solid 4px transparent;
border-top-color: #E4002B !important;
border-left-color: #E4002B !important;
border-radius: 50%;
float: left;
}
@keyframes loading-bar-spinner {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
.sfmc_btn > *{
border:1px solid red;
}
.wrap, .spinner {
display: inline-block;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form name="email" class="form1" action="" method="post">
<label for="email">Your Email</label>
<input name="Email" id="email" type="email">
<input type="submit" value="submit">
</form><br /><br />
<h2>
Testing Form
</h2>
<form name="sample_data" class="form2">
<label for="fname">First Name</label>
<input name="fname" id="fname_id" type="text"><br />
<label for="lname">Last Name</label>
<input name="lname" id="lname_id" type="text">
<div class="wrap">
<input type="submit" class="sfmc_btn" id="subm_sfmc" value="submit">
<div class="spinner">
<div id="loading-bar-spinner" class="spinner">
<div class="spinner-icon"></div>
</div>
</div>
</div>
</form>
Ответ №2:
#loading-bar-spinner.spinner {
display: inline-block;
animation: loading-bar-spinner 400ms linear infinite;
}
#loading-bar-spinner.spinner .spinner-icon {
width: 12px;
height: 12px;
border: solid 3px transparent;
border-top-color: aliceblue;
border-left-color: #E4002B !important;
border-bottom-color: #E4002B;
border-radius: 50%;
float: left;
}
Ответ №3:
Внесенные изменения см. в комментариях к коду.
#loading-bar-spinner.spinner {
left: 50%;
/* margin-left: -20px; */
top: calc(50% - 3px); /* <-------- Used calc to position vertically */
/* margin-top: -20px; */
position: absolute;
z-index: 19 !important;
animation: loading-bar-spinner 400ms linear infinite;
}
#loading-bar-spinner.spinner .spinner-icon {
width: 20px;
height: 20px;
border: solid 4px transparent;
border-top-color: #E4002B !important;
border-left-color: #E4002B !important;
border-radius: 50%;
float: left;
}
.form2 { /* added to allow */
position: relative; /* positioning within */
} /* this element */
@keyframes loading-bar-spinner {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
<form name="sample_data" class="form2">
<label for="fname">First Name</label>
<input name="fname" id="fname_id" type="text"><br />
<label for="lname">Last Name</label>
<input name="lname" id="lname_id" type="text">
<input type="submit" class="sfmc_btn" id="subm_sfmc" value="submit">
<div id="loading-bar-spinner" class="spinner">
<div class="spinner-icon"></div>
</div>
</form>
Ответ №4:
<style>
#loading-bar-spinner.spinner {
position: absolute;
animation: loading-bar-spinner 400ms linear infinite;
}
#loading-bar-spinner.spinner .spinner-icon {
width: 20px;
height: 20px;
border: solid 4px transparent;
border-top-color: #E4002B !important;
border-left-color: #E4002B !important;
border-bottom-color: #E4002B !important;
border-radius: 50%;
float: left;
}
@keyframes loading-bar-spinner {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<body>
<form name="sample_data" class="form2">
<label for="fname">First Name</label>
<input name="fname" id="fname_id" type="text"><br />
<label for="lname">Last Name</label>
<input name="lname" id="lname_id" type="text">
<div style=" top:25px ; left:280px ; position: fixed; widht:100px; " >
<div style="float:left;" >
<input type="submit" class="sfmc_btn" id="subm_sfmc" value="submit">
</div>
<div style="float: right; margin-left:10px;" >
<div id="loading-bar-spinner" class="spinner">
<div class="spinner-icon">
</div>
</div>
</div>
</div>
</form>
</body>
Попробуй это !!!
Ответ №5:
Окружите кнопку и div для спиннера в родительском div. Дайте ему имя класса. Затем в своем css предоставьте классу отображение flex, что-то вроде этого;
<div class"wrapper">
<input type="submit"..../>
<div id="loading-bar-spinner" class="spinner">
<div class="spinner-icon"></div>
</div>
</div>
Теперь дайте обертке дисплей изгиба, чтобы расположить детей рядом друг с другом вот так;
.wrapper{
display: flex;
}
Вы также можете прочитать о содержании обоснования и выравнивании элементов гибких элементов, чтобы разместить дочерние элементы по мере необходимости.
NB: Не обращайте внимания на плохой формат моего ответа, я печатаю с мобильного телефона