How do I resize css loaders? - css

Question

I'm wondering how I resize css loaders like resize it for mobile users cause I noticed the loaders don't resize for mobile users they just stay the same size no matter the size of the page, I want it to resize itself like text and stuff does. Here's an example of a css loader if you're confused:
http://jsfiddle.net/hdznz09a
#floatBarsG{
position:relative;
width:234px;
height:28px;
margin:auto;
margin-top: 13%;
}
.floatBarsG{
position:absolute;
top:0;
background-color:rgb(0,0,0);
width:28px;
height:28px;
animation-name:bounce_floatBarsG;
animation-duration:1.5s;
animation-direction:normal;
transform:scale(.3);
}
#floatBarsG_1{
left:0;
animation-delay:0.6s;
}
#floatBarsG_2{
left:29px;
animation-delay:0.75s;
}
#floatBarsG_3{
left:58px;
animation-delay:0.9s;
}
#floatBarsG_4{
left:88px;
animation-delay:1.05s;
}
#floatBarsG_5{
left:117px;
animation-delay:1.2s;
}
#floatBarsG_6{
left:146px;
animation-delay:1.35s;
}
#floatBarsG_7{
left:175px;
animation-delay:1.5s;
}
#floatBarsG_8{
left:205px;
animation-delay:1.64s;
}
#keyframes bounce_floatBarsG{
0%{
transform:scale(1);
background-color:rgb(0,0,0);
}
100%{
transform:scale(.3);
background-color:rgb(255,255,255);
}
}
<div id="floatBarsG">
<div id="floatBarsG_1" class="floatBarsG"></div>
<div id="floatBarsG_2" class="floatBarsG"></div>
<div id="floatBarsG_3" class="floatBarsG"></div>
<div id="floatBarsG_4" class="floatBarsG"></div>
<div id="floatBarsG_5" class="floatBarsG"></div>
<div id="floatBarsG_6" class="floatBarsG"></div>
<div id="floatBarsG_7" class="floatBarsG"></div>
<div id="floatBarsG_8" class="floatBarsG"></div>
</div>

Answer 1

You could use the:
transform: scale(0.5);
on your:
<div id="floatBarsG">
element like shown below
#floatBarsG{
position:absolute;
width: 33%;
height:28px;
margin-left: -117px;
left: 50%;
margin-top: 13%;
transform: scale(0.5);
}
in combination with media querys for your desired width's / devices
Articles about media querys:
https://wiki.selfhtml.org/wiki/CSS/Media_Queries
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
JSFIDDLE Example: http://jsfiddle.net/hdznz09a/3/ (Try resizing your browser window)

Answer 2

As said in comments:
use dynamic size like vh or vw
float:left; your minitinysquares and
don't to absolute and left values
don't use #ID, use classes instead (code reusability)
#floatBarsG{
position:absolute;
left:50%; top: 50%;
transform: translate(-50%, -50%);
}
.floatBarsG{
float:left;
background-color:rgb(0,0,0);
width:3vh; /* Use responsive units */
height:3vh;
min-width: 20px; /* prevent making them too small */
min-height: 20px;
animation:bounce_floatBarsG 1.5s infinite;
transform:scale(.3);
}
.floatBarsG._1{animation-delay:0.6s;}
.floatBarsG._2{animation-delay:0.75s;}
.floatBarsG._3{animation-delay:0.9s;}
.floatBarsG._4{animation-delay:1.05s;}
.floatBarsG._5{animation-delay:1.2s;}
.floatBarsG._6{animation-delay:1.35s;}
.floatBarsG._7{animation-delay:1.5s;}
.floatBarsG._8{animation-delay:1.64s;}
#keyframes bounce_floatBarsG{
from{
transform:scale(1);
background-color:rgb(0,0,0);
}
to{
transform:scale(.3);
background-color:rgb(255,255,255);
}
}
<div id="floatBarsG">
<div class="floatBarsG _1"></div>
<div class="floatBarsG _2"></div>
<div class="floatBarsG _3"></div>
<div class="floatBarsG _4"></div>
<div class="floatBarsG _5"></div>
<div class="floatBarsG _6"></div>
<div class="floatBarsG _7"></div>
<div class="floatBarsG _8"></div>
</div>