I've successfully added a basic spinner to my <app-root> in the index.html file. This gives the appearance that something is happening behind the scenes while waiting for my app to fully load, rather than showing a blank white page.
However, I'm struggling to center it vertically on the page without affecting the vertical alignment of the app's contents as they load.
Am I overlooking something?
I considered nesting the spinner within another div and setting a specific height for that container to achieve vertical centering, but it doesn't feel like an elegant solution.
I also explored using:
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Here is the Codepen for this approach
However, with the current setup, the positioning seems to be based on the top left corner of the overall div, resulting in an offset to the left and bottom, equal to the size of the spinner.
Here is the Codepen for just horizontal centering
index.html
<!doctype html>
<html lang="en">
<head>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid red;
width: 120px;
height: 120px;
animation: spin 1s linear infinite;
margin: auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<meta charset="utf-8">
<title>BettingUi</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:400,500" rel="stylesheet">
</head>
<body>
<!--<app-root>-->
<!--
This will display a loader while the app is loading - in case of slow connection
We cannot use an Angular component here as it will only be displayed after loading
all components - so direct HTML here is the best option for this.
-->
<div class="loader"></div>
<!--</app-root>-->
</body>
</html>
UPDATE I did eventually find a solution myself:
display: inline-block;
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 60px);
In this solution, I decided to adjust the position by half of the actual width and height of the spinner, since it was being centered based on the top-left corner of the element's defined square dimensions.