jQuery Bootstrap 4 在按钮中加载微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54522830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Loading Spinner in button
提问by user3206440
I'm trying to implement the bootstrap 4 loading spinner in button as in Bootstrap Spinners.
我正在尝试在按钮中实现 bootstrap 4 加载微调器，就像在 Bootstrap Spinners 中一样。
Below is what I'm doing in code
下面是我在代码中所做的
my.html
我的.html
<form class="form-inline" id="topicForm" action="" method="POST">
<input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="Topic of interest" required autofocus/>
<button type="button" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
</form>
my.js
我的.js
$(document).ready(function() {
$("#btnFetch").click(function() {
// load data via AJAX
fetch_data($("#inputTopic").val());
// disable button
$(this).prop("disabled", true);
// add spinner to button
$(this).html(
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...`
);
});
});
This works except that the spinner as shown in bootstrap doc is not showing up. The button text is changing to Loading...as expected. Wanted to know what is that I'm not doing right to the spinner inside the button.
除了引导程序文档中所示的微调器没有显示之外，这有效。按钮文本Loading...按预期更改。想知道什么是我对按钮内的微调器做得不对。
回答by Partho63
You have to add Bootstrap 4.2.1 for this code while you are using 4.0
在使用 4.0 时，您必须为此代码添加 Bootstrap 4.2.1
$(document).ready(function() {
$("#btnFetch").click(function() {
// disable button
$(this).prop("disabled", true);
// add spinner to button
$(this).html(
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
);
});
});<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div style="margin:3em;">
<form class="form-inline" id="topicForm" action="" method="POST">
<input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="Topic of interest" required autofocus/>
<button type="button" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>回答by mujuonly
It seems like spinner CSS is not present in the loaded CSS library. Please try below codes
加载的 CSS 库中似乎不存在微调 CSS。请尝试以下代码
In CSS
在 CSS 中
@keyframes spinner-border {
to { transform: rotate(360deg); }
}
.spinner-border{
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: .25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
.spinner-border-sm{
height: 1rem;
border-width: .2em;
}
In JS
在JS中
$(document).ready(function() {
$("#btnFetch").click(function() {
$(this).prop("disabled", true);
$(this).html(
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loadingg...`
);
});
});
回答by kunal verma
Could you Try Adding [In head] I added It Worked in your codepen
你可以尝试添加 [In head] 我在你的代码笔中添加了它
<link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
and this
和这个
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
回答by Arthur Cam
You can do your own spinner, it is easy.
你可以自己做微调器，这很容易。
you can go this link and select a css spinner, you can see the css code and html part, if you click the source.
你可以去这个链接并选择一个css微调器，你可以看到css代码和html部分，如果你点击源。
then, under your Angular project, create a component with own css, like:
然后，在您的 Angular 项目下，使用自己的 css 创建一个组件，例如：
@Component({
selector: 'app-myWonderfulSpinner',
templateUrl: './myWonderfulSpinner.component.html',
styleUrls: ['./myWonderfulSpinner.css']
})
Paste the css into the css file, paste html into the template file.
将css粘贴到css文件中，将html粘贴到模板文件中。
now you have your component and you can use it whenever you want in your project.
现在你有了你的组件，你可以在你的项目中随时使用它。
in the page where you need the use the spinner, create a structure like this.
在需要使用微调器的页面中，创建这样的结构。
<div *ngIf="isLoading">
<app-myWonderfulSpinner></app-myWonderfulSpinner>
</div>
<div *ngIf="!isLoading">
--your actual page components are here
</div>
inside your code, you can define and set this isLoadingparameter accordingly.
在您的代码中，您可以相应地定义和设置此isLoading参数。
