is this what are you looking for?
<style>
body,html{
margin:0;
padding:0;
}
.loadingcontainer{
width: 100vw;
height: 50vh;
padding-top: 50vh;
text-align: center;
}
#loader {
position: relative;
left: 50%;
margin: -30px 0 0 -30px;
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #1976d2;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
#loadingMsg{
margin-top: 5px;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loadingcontainer">
<div id="loader"></div>
<div id="loadingMsg">Making stuff up. Please wait... </div>
</div>
You can insert position only for container, like this :
.loadingcontainer {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
for setting text center use :
#loader {
margin: auto;
//Other codes...
}
.loadingcontainer {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#loader {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #1976d2;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin: auto;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loadingcontainer">
<div id="loader"></div>
<div id="loadingMsg" style="font-family: sans-serif; font-size: 12px; font-weight: bold; color:black;">Making stuff up. Please wait... </div>
</div>
<style>
#loader {
position:absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #1976d2;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body id="body">
<div class="loadingcontainer">
<div id="loader"></div>
<div id="loadingMsg" style="font-family: sans-serif; font-size: 12px; font-weight: bold; color:black; top: 50%; left: 50%; margin: -25px 0 0 -25px; position:absolute;">Making stuff up. Please wait... </div>
</div>
there is a loader and a text below, kindly help to centrally position text below/under the loader for all screen-sizes. How to style/make changes in the above code?
What do you mean by “centrally position text”? Screenshot/description of desired result would be helpful.
Adjusting #loadingMsg margin by -25px won’t center it. It needs to be adjusted by half the width of #loadingMsg to get centered horizontally.
For center the text, you can remove the css “left” and add “width: 100%; text-align: center;”
basically centrally position it under the pre-loader, for any screen-size. I tried using top:60 % and left:45%. but this wont work for smaller screen size or apps.
