कोणीय 2 सामग्री - प्रगति स्पिनर

Question

मैं नीचे दिए गए लिंक से कोणीय 2 प्रगति स्पिनर को लागू किया है

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

मैं इसे केंद्रित करने के लिए, एक ही रास्ता मैं करने के लिए लग सकता है की तरह है, हालांकि होगा केंद्र के लिए कैसे इसे काम करने के लिए

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 मार्कअप देखे बिना आपको बताने के लिए क्या करना है मुश्किल हो जाएगा। सीएसएस अपने दोस्त यहाँ है और हो सकता है यह पेज आप मदद कर सकते हैं: 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); 
}