Angular 2 Material - How To Center Progress Spinner

Question

I have implemented the Angular 2 progress spinner from the below link

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

I would like to have it centered, however, the only way I can seem to get it to work is to remove the

display: block

from the CSS. However, this causes the spinner to appear huge on the page.

Any advice would be great.

Andriy · Accepted Answer · 2023-01-22T18:19:13.377

just add margin rule:

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

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

UPDATE

Just wanted to share and demonstrate 6 other general centering solutions

FLEX:

.center {
  display: flex; 
  justify-content: center; 
  align-items: center;
}


/* +++++++ STYLES +++++++ */
.wrapper {
  height: calc(100vh - 20px);
  background: red;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
}

<div class="wrapper center">
  <div class="inner">INNER CONTENT</div>
</div>

GRID:

.center {
  display: grid; 
  place-items: center;
}


/* +++++++ STYLES +++++++ */
.wrapper {
  height: calc(100vh - 20px);
  background: red;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
}

<div class="wrapper center">
  <div class="inner">INNER CONTENT</div>
</div>

LINE HEIGHT + TEXT ALIGN (will not work as desired for multiple lines, use white-space: nowrap; to ensure one line)

.center {
  line-height: calc(100vh - 20px);
  text-align: center;
}


/* +++++++ STYLES +++++++ */
.wrapper {
  background: red;
  white-space: nowrap;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
  display: inline;
}

<div class="wrapper center">
  <div class="inner">INNER CONTENT</div>
</div>

USING ABSOLUTE, TOP, LEFT and TRANSFORM TRANSLATE

.center.wrapper {
  position: relative;
}
.center .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* +++++++ STYLES +++++++ */
.wrapper {
  height: calc(100vh - 20px);
  background: red;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
}

<div class="wrapper center">
  <div class="inner">INNER CONTENT</div>
</div>

USING ABSOLUTE, TOP, LEFT, BOTTOM, RIGHT and MARGIN AUTO (mentioned by György Balássy). Note: inner div width needs to be set.

.center.wrapper {
  position: relative;
}
.center .inner {
  position: absolute;
  inset: 0;
  margin: auto;
}


/* +++++++ STYLES +++++++ */
.wrapper {
  height: calc(100vh - 20px);
  background: red;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
  height: max-content;
  width: max-content;
}

<div class="wrapper center">
  <div class="inner">INNER CONTENT</div>
</div>

Using TABLE

.center {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

/* +++++++ STYLES +++++++ */
.wrapper {
  height: calc(100vh - 20px);
  width: calc(100vw - 20px);;
  background: red;
}
.inner {
  background: green;
  color: white;
  padding: 12px;
  display: inline-block;
}

<div class="wrapper center">
  <div class="inner">INNER CONTENT</div>
</div>

This one works. I am not really good in CSS but how can you achieve this using flexbox? — brijmcq, Apr 11 '17 at 23:22
You can center any element by adding wrapper div with style="display: flex; justify-content: center; align-items: center;". You can practice flex at http://the-echoplex.net/flexyboxes/ — Andriy, Apr 12 '17 at 00:36

score 55 · Answer 2 · answered Oct 12 '17 at 00:34

This CodePen helped me to create a page-centered spinner with Material Design in Angular 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);
}

First solution is not center vertically but your solution is perfect for it. Thank you so much. — Halil İbrahim Oymacı, Feb 25 '19 at 13:07

score 7 · Answer 3 · answered Oct 08 '19 at 05:32

7

The first answer doesn't work unless height is set in a parent element.

I fixed it using fxFlex

<div fxLayout="row" fxLayoutAlign="space-around center" style="height:100%">
        <mat-spinner diameter="50" strokeWidth="5"></mat-spinner>
</div>

answered Oct 08 '19 at 05:32

Worthy7

1,455
15
28

1

Seems the only thing needed is `fxLayoutAlign="center"`. – cevaris Dec 29 '20 at 00:05

score 3 · Answer 4 · answered Oct 22 '18 at 20:39

3

I am using angular 6 with material 2+ and used that CSS code:

.mat-spinner {
    position: relative;
    margin-left: 50%;
    margin-right: 50%;
}

answered Oct 22 '18 at 20:39

user3515688

47
3

1

You don't have to say `margin-right: 50%` as well. You only have to use `margin-left: 50%` – Corné Jan 25 '19 at 08:41
@Corné Then you should `transform: translateX(-50%)`, or it won't be perfectly centered. – Chris Fremgen Dec 31 '19 at 00:15

score 2 · Answer 5 · answered Jun 24 '21 at 13:46

Source: Angular Wiki

For me, this worked the best:

Component:

<div class="center">
    <mat-spinner> </mat-spinner>
</div>

Scss:

/** Can be used to center any element */
.center {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

score 0 · Answer 6 · edited Aug 15 '21 at 23:18

0

you can use with grid as well :

.wrapper {
  display: grid; 
  place-content: center; 
  height: calc(100vh - 20px);
  background: red;
}

edited Aug 15 '21 at 23:18

Andriy

14,781
4
46
50

answered May 27 '21 at 09:56

yanai edri

359
2
4

Angular 2 Material - How To Center Progress Spinner

6 Answers6