Can't manage to center the loader - html

Question

I'm using a loader in my application, but I can't manage to properly centre it.
As you are going to see it's slightly moved to left side of the screen.
Here's the fiddle: Loader
Here's the HTML code:
<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>
Here's the SCSS code:
.loader-graph-default{
background-color: black;
display: none;
}
.loader-graph-loading{
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 60px;
height: 60px;
margin: auto;
text-align: center;
&__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
background: white;
&--value {
background: #009ECB;
}
&:first-of-type {
top: 20px;
left: -12px;
animation-delay: .4s;
}
&:last-of-type {
top: 20px;
left: 12px;
animation-delay: .2s;
}
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height:20px;
background: inherit;
transform: rotate(-62deg);
}
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
}
}
#keyframes fade{
0%{
opacity: 1;
}
50%{
opacity: .1;
}
100%{
opacity: 1;
}
}
If you go to the fiddle and you inspect the div with the class "loader" you can see that it's not centred.
What am I missing?

Answer 1

when you rotate a div, of course it changes it centre point, so i just repositioned it.
.loader-graph-default{
background-color: black;
display: none;
}
.loader-graph-loading{
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 60px;
height: 60px;
margin: auto;
text-align: center;
&__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
/*background: $uiColor;*/
background: white;
/*
&--carbon {
background: $carbon;
}
&--value {
background: $value;
}
&--research {
background: $research;
}
&--quality {
background: $quality;
}
*/
&--value {
background: #009ECB;
}
&:first-of-type {
top: 20px;
right: 50%;
margin-left: 3px;
animation-delay: 0.4s;
}
&:last-of-type {
top: 20px;
left: 50%;
animation-delay: 0.2s;
margin-left: 6px;
}
&:nth-child(2) {
left: 50%;
margin-left: -6px;
}
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height:20px;
background: inherit;
transform: rotate(-62deg);
}
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
}
}
#keyframes fade{
0%{
opacity: 1;
}
50%{
opacity: .1;
}
100%{
opacity: 1;
}
}
<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>
Fiddle

Answer 2

You can set loader width 60px to 48px to resolve this. check updated snippet below..
.loader-graph-default {
background-color: black;
display: none;
}
.loader-graph-loading {
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 48px;
height: 60px;
margin: auto;
text-align: center;
left: 12px;
}
.loader__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
background: white;
}
.loader__hexagon--value {
background: #009ECB;
}
.loader__hexagon:first-of-type {
top: 20px;
left: -12px;
animation-delay: 0.4s;
}
.loader__hexagon:last-of-type {
top: 20px;
left: 12px;
animation-delay: 0.2s;
}
.loader__hexagon:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(-62deg);
}
.loader__hexagon:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
#keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>

Answer 3

You have added left:-12px to the first of div with class "loader__hexagon loader__hexagon--value", which shifts the whole block to the left by -12px.
Also the width of the Loader is not 60px.
The style should be as given below :
.loader__hexagon:first-of-type {
top: 20px;
animation-delay: 0.4s;}
Add a style for second child:
.loader__hexagon:nth-child(2) {
left: 12px; }
Edit style of third child:
.loader__hexagon:last-of-type {
top: 20px;
left: 23px;
animation-delay: 0.2s; }
Reduce the width of the loader to 45px:
.loader {
background: none;
position: relative;
width: 45px;
height: 60px;
margin: auto;
text-align: center; }

Answer 4

You are using absolute positioning on your hexagons, that's why they are not centered, try a different approach such as display: inline-block with adjusted margins (some space inbetween) for bottom hexagons.
&__hexagon {
margin: 0 auto;
}
&:first-of-type {
display: block;
}
&:nth-child(2) {
margin-right: 4px;
display: inline-block;
}
&:last-of-type {
margin-left: 4px;
display: inline-block;
}
fiddle