Is there a way to center the loading spinner on my page while it's still loading data? I currently have a sidebar with buttons and a main content section. Right now, I've been adjusting the position of the spinner manually by using margin-left: quantity px. Any suggestions on how to improve this?
<div class = "wrapper">
<div class = "sidebar">
<app-sidebar></app-sidebar>
</div>
<div id ="maincontent" class ="main_content">
<app-dashboard></app-dashboard>
</div>
<div id = "spinner" class ="main_content" style="margin-top: 300px; margin-left: 750px; display: none">
<div >
<div class="spinner-border" role="status">
</div>
<div>
<p>Loading...</p>
</div>
</div>
</div>
</div>
css
.wrapper{
display: flex;
position: relative;
}
.wrapper .main_content{
width: 100%;
margin-left: 200px;
}
.sidebar {
width: 200px;
height: 100%;
padding: 30px 0px;
position: fixed;
}