How to make this loading overlay effect responsive? - css

Question

I'm trying to do a loading overlay effect with an rotating icon in the middle. I use fontawesome.
So I coded this: http://jsfiddle.net/eys3d/7/
It works, but I'm trying to make it responsive. I mean, when the section size decreases, the spin size will decrease too (remaining centered). An if the size of the section increases, the oposite.
I tried to use em units, but I didn't get the result I expected.
Is this the best way to do it? How I can make it responsive?
CSS
section {
width: 200px;
height: 200px;
margin: 50px;
}
#overlay {
position: relative;
width: 100%;
height: 100%;
z-index: 99999999999;
background: rgba(0, 0, 0, 0.5);
}
#overlay i {
position: absolute;
top: 50%;
left: 50%;
}
.spin-big {
font-size: 50px;
height: 50px;
width: 50px;
margin-top: -25px;
margin-left: -25px;
}
.spin-normal {
font-size: 35px;
height: 35px;
width: 35px;
margin-top: -22.5px;
margin-left: -22.5px;
}
.spin-small {
font-size: 20px;
height: 20px;
width: 20px;
margin-top: -10px;
margin-left: -10px;
}
HTML
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-big"></i>
</div>
</section>
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-normal"></i>
</div>
</section>
<section>
<div id="overlay">
<i class="fa fa-spinner fa-spin spin-small"></i>
</div>
</section>
Any tip, advice or help will be appreciated, and If you need more info, let me know and I'll edit the post.

Answer 1

Why you won't try to use display:table attribute to your overlay div and display:table-cell to fontawesome i class? as below:
#overlay {
width: 100%;
height: 100%;
display:table;
background: rgba(0, 0, 0, 0.5);
}
#overlay i {
display:table-cell;
vertical-align:middle;
text-align:center;
}
Working Demo

Answer 2

you can use this for good effect
.loading
{
pointer-events: all;
z-index: 99999;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: wait;
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
}

Answer 3

Just run into this looking for a similar solution.
The only way to responsively change the font-size would be through media queries.
I.e:
#media min-device-width: 300px{
font-size: 8px;
}
#media min-device-width: 480px{
font-size: 12px;
}
ext..

Answer 4

-----------div in Layout Page---------------
<div class="loading-bg" id="dvSpinner">
<img src="~/Areas/Images/loader.gif">
</div>
----------css-----------
.loading-bg {
background: #e9e9e9;
display: none;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
z-index: 5000;
width: 100%;
}
.loading-bg img{
position: absolute;
top: 42%;
left: 46%;
height: 100px;
width: 100px;
}
-------------html------------
<div class="appendInputFieldForUAIHiddenDiv"
id="appendInputFieldForUAIHiddenDiv">
#Html.TextBoxFor(model => model.PrimaryEmail, new { #class = "form-control enter-email-FPHidden-div", id = "email-address-entered", name = "email-address-entered" })
#Html.ValidationMessageFor(model => model.PrimaryEmail)
<button type="submit" class="btn btn-info submit-button-FPHidden" onclick="submitbuttonFPHidden()">
#ASRP.Resources.Resource.Submit
</button>
</div>
--------------scripts--------------------------
function submitbuttonFPHidden() {
var username = $('#email-address-entered').val();
if (username == null || username == "") {
document.getElementById("email-address-entered").style.borderColor = "#ff0232";
return false;
}
if (!validateEmail(username)) {
document.getElementById("email-address-entered").style.borderColor = "#ff0232";
return false;
}
document.getElementById('dvSpinner').style.display = "block";
$.ajax({
url: "../User/ForgotPassword",
data: { email: username },
dataType: "json",
type: "post",
error: function (error, msg) {
$('div#dvSpinner').hide();
return false;
},
success: function (data) {
if (data.success) {
if (data.emailSent == "Successful") {
document.getElementById('FPHiddenDivContainer').style.display = "none";
document.getElementById('entered-email-address').style.display = "block";
document.getElementById('entered-email-address-para').innerHTML = document.getElementById('email-address-entered').value;
document.getElementById('PwdMsgNew').style.display = "none";
}
else if (data.emailSent == "Failure")
{
document.getElementById('FPHiddenDivContainer').style.display = "none";
document.getElementById('entered-email-address').style.display = "block";
document.getElementById('entered-email-address-para').innerHTML = document.getElementById('email-address-entered').value;
document.getElementById('PwdMsg').style.display = "none";
document.getElementById('lblThankYou').style.display = "none";
}
}
else {
var ddlLangValue = $('#ddlLangs').val();
setCookie("culture", ddlLangValue, 31536e3);
var resources = {}; // Global variable.
(function ($) {
$.getJSON("Resource/GetResources", function (data) {
resources = data;
alert(resources.fpUnabletoProcessReq);
});
})(jQuery);
}
document.getElementById('dvSpinner').style.display = "none";
}
});
return true;
}