.load-indicator { position: absolute; top: 50%; z-index: 1; } @media only screen and (max-width: 1199px) { .load-indicator { left: 46%; } } @media only screen and (min-width: 1200px) { .load-indicator { left: 46%; } } @media only screen and (min-width: 1376px) { .load-indicator { left: 46.5%; } } @media only screen and (min-width: 1600px) { .load-indicator { left: 47.5%; } } @media only screen and (min-width: 1925px) { .load-indicator { left: 48%; } } :host /deep/ .mat-progress-spinner circle, .mat-spinner circle { stroke: #000000 !important; stroke-linecap: round; } .load-arrow { background: url(../../assets/loading.png) no-repeat; display: block; width: 80px; height: 80px; } /* Loading Animation */ .glyphicon-refresh-animate { animation: spin 1.5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }