197

TwitterBootstrapのボタンには素晴らしいLoading...状態があります。

問題は、次のような属性Loading...を介して渡されたようなメッセージを表示することです。data-loading-text

<button type="button" class="btn btn-primary start" id="btnStartUploads"
        data-loading-text="@Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>

Font Awesomeを見ると、アニメーション化されたスピナーアイコンがあることがわかります。

Upload次のような操作を実行するときに、そのスピナーアイコンを統合しようとしました。

$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');

しかし、これはまったく効果がありませんでしたUploading...。つまり、ボタンのテキストが表示されるだけです。

ボタンが読み込み中のときにアイコンを追加することはできますか？どういうわけか、Bootstrap<i class="icon-upload icon-large"></i>はLoading状態のときにボタン内のアイコンを削除するだけのようです。

これは、上記で説明した動作を示す簡単なデモです。ご覧のとおり、読み込み状態になるとアイコンが消えます。時間間隔の直後に再表示されます。

4

10 に答える 10

330

CSS3 アニメーションを使用したBootstrap 3のシンプルなソリューション。

CSS に以下を記述します。

.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

spinning次に、 class をwhile loading に追加してglyphicon、回転するアイコンを取得します。

<button class="btn btn-lg btn-warning">
    <span class="glyphicon glyphicon-refresh spinning"></span> Loading...    
</button>

http://www.bootply.com/128062#に基づく

  • 注: IE9 以下は CSS3 アニメーションをサポートしていません。
于 2014-10-09T16:35:40.873 に答える
101

bootstrap-button.jsソースを見ると、ブートストラッププラグインが、呼び出し時にHTML内のボタンをdata-loading-text$(myElem).button('loading')にあるものに置き換えていることがわかります。

あなたの場合、私はあなたがこれを行うことができるはずだと思います：

<button type="button"
        class="btn btn-primary start"
        id="btnStartUploads"
        data-loading-text="<i class='icon-spinner icon-spin icon-large'></i> @Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>
于 2013-02-10T04:11:53.457 に答える