lightning:spinner

lightning:spinner は、機能が読み込み中であることを示すアニメーションスピナー画像を表示します。このコンポーネントは、データを取得しているとき、または操作がすぐに完了しないときに使用できます。

variant 属性は、スピナーの外観を変更します。variant="brand" に設定した場合、スピナーは Lightning Design System ブランドの色と同じになります。variant="inverse" に設定すると、白いスピナーが表示されます。デフォルトのスピナーの色はダークブルーです。

このコンポーネントは、Lightning Design System のスピナーからスタイル設定を継承します。

次に例を示します。

1<aura:component>
2    <lightning:spinner variant="brand" size="large"/>
3</aura:component>

lightning:spinner は、条件付きで使用します。aura:if または Lightning Design System ユーティリティクラスを使用して、スピナーを表示または非表示にすることができます。

1<aura:component>
2    <lightning:button label="Toggle" variant="brand" onclick="{!c.toggle}"/>
3    <div class="exampleHolder">
4        <lightning:spinner aura:id="mySpinner" />
5    </div>
6</aura:component>

次のクライアント側コントローラは、スピナーの slds-hide クラスを切り替えます。

1({
2    toggle: function (cmp, event) {
3        var spinner = cmp.find("mySpinner");
4        $A.util.toggleClass(spinner, "slds-hide");
5    }
6})

属性