角度2材質 - どのようにセンターに進行スピナー

Question

私は、しかし、それは集中しているために、私はように見えることができる唯一の方法をしたいと思い、下記のリンクから角度2つの進捗スピナー

https://github.com/angular/material2/tree/master/src/lib/progress-spinner

を実装していますそれが働くようにするには、CSSから削除することです。

display: block 

しかし、これによりスピナーはページ上で大きく見えるようになります。

アドバイスは素晴らしいでしょう。

Answer 1

だけマージンルールを追加します。

<md-progress-spinner style="margin:0 auto;" mode="indeterminate"></md-progress-spinner> 

plunker：http://plnkr.co/edit/sEiTZt830ZE7rqjq9YXO?p=preview

Answer 2

これは、生成されたHTMLマークアップを見ずに何をすべきかを伝えるのが難しいでしょう。 CSSは、ここにあなたの友人である、多分このページはあなたを助けることができる：W3.org

Answer 3

このCodePenは素材のページを中心としたスピナーを作成するために私を助けました角度4のデザイン：https://codepen.io/MattIn4D/pen/LiKFC

Component.html：

<div class="loading-indicator"> 
    <mat-progress-spinner mode="indeterminate" color="accent"></mat-progress-spinner> 
</div> 

Component.css：

/* Absolute Center Spinner */ 
.loading-indicator { 
    position: fixed; 
    z-index: 999; 
    height: 2em; 
    width: 2em; 
    overflow: show; 
    margin: auto; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

/* Transparent Overlay */ 
.loading-indicator:before { 
    content: ''; 
    display: block; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.3); 
}