web-dev-qa-db-ja.com

Bootstrap 4ボタンにスピナーをロード

Bootstrap Spinners のように、ボタンにbootstrap 4ローディングスピナーを実装しようとしています。

以下はコードで私がやっていることです

my.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

$(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...`
      );
    });
});

これは、bootstrap docに示されているスピナーが表示されないことを除いて機能します。ボタンのテキストが期待どおりLoading...に変わります。私が何をしていないのか知りたいボタン内のスピナーの右側。

ここにコードペン

jquerybootstrap-4
18
user3206440

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>
31
Partho63

追加してみてください[頭の中で]私はそれを追加しました

  <link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

この

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
3
kunal verma

読み込まれたCSSライブラリにスピナー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;
    }

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...`
      );
    });
});

コードペン

3
mujuonly

あなた自身のスピナーを行うことができます、それは簡単です。

このリンクをクリックしてcssスピナーを選択すると、ソースをクリックするとcssコードとhtml部分が表示されます。

次に、Angularプロジェクトの下で、次のように独自のcssでコンポーネントを作成します。

@Component({
  selector: 'app-myWonderfulSpinner',
  templateUrl: './myWonderfulSpinner.component.html',
  styleUrls: ['./myWonderfulSpinner.css']
})

Cssをcssファイルに貼り付け、htmlをテンプレートファイルに貼り付けます。

これでコンポーネントが作成され、プロジェクトでいつでも使用できます。

スピナーを使用する必要があるページで、このような構造を作成します。

<div *ngIf="isLoading">
<app-myWonderfulSpinner></app-myWonderfulSpinner>
</div>
<div *ngIf="!isLoading">
--your actual page components are here
</div>

コード内で、それに応じてこのisLoadingパラメータを定義および設定できます。

0
Arthur Cam