Struggling to align the loader in the center

I'm having trouble centering a loader in my application.

It seems to be slightly shifted to the left side of the screen. Take a look at this fiddle to see it in action: Loader

Below is 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>

And here is 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 visit the fiddle and inspect the div with the class "loader," you'll notice that it's not properly centered.

Can anyone help me figure out what I'm missing?

htmlcss

Answer №1

When a div is rotated, its center point changes, so I simply readjusted its position.

.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;

      
      &--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

To fix the issue, adjust the loader width from 60px to 48px. See the updated code 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've made an adjustment of left:-12px to the initial div in the "loader__hexagon loader__hexagon--value" class, causing the entire block to shift 12px to the left.

Additionally, the Loader's width isn't actually 60px. Here is the correct style:

.loader__hexagon:first-of-type {
top: 20px;
animation-delay: 0.4s;}

Include a style for the second child:

.loader__hexagon:nth-child(2) {
   left: 12px;
}

Adjust the style for the third child:

.loader__hexagon:last-of-type {
    top: 20px;
    left: 23px;
    animation-delay: 0.2s; 
}

Decrease the width of the loader to 45px:

.loader {
   background: none;
   position: relative;
   width: 45px;
   height: 60px;
   margin: auto;
   text-align: center;  
}

Answer №4

Your hexagons are currently not centered because of the absolute positioning you have used. Consider using a different method like setting display: inline-block with adjusted margins to create some space between the bottom hexagons and achieve better alignment.

  &__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;
  }

Check out this example on JSFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the width of the TinyMCE Editor to automatically resize based on the content being

Is it possible for TinyMCE to adjust the content within an absolutely positioned container and update the width while editing? <div class="container"> <textarea>This is my very long text that should not break. This is my very long text tha ...

javascripthtmlcsstinymcewysiwyg

Difficulty encountered in setting the width of a sticky bottom element to be located at the bottom of the page with Tailwind

Fiddle: https://play.tailwindcss.com/pvT1jW8zZd Here is the code snippet I am working with: Here is how it currently appears: https://i.sstatic.net/2SRny.png <div class="bg-yellow-300"> <div class="p-16 m-5 text-xl bg-gray-500 ...

htmlcsstailwind-css

When the text exceeds the designated block, it will be fragmented

I have always struggled with text elements not breaking when they exceed the boundaries of their parent element. I understand that setting a max-width of 100px will solve the issue, but it's not an ideal solution for me. I want the text to break only ...

htmlcss

Extract data from an HTML table using jsoup

Having trouble scraping html text again. Here's a snippet I'm trying to extract from: <table class="scripture"> <tbody> <tr> <td class="verse" valign="top"> <a name="2:1"></a><a class="vers" hre ...

javahtmljsoup

stopPropagation() halts the propagation in the opposite direction

I encountered an issue while attempting to create a non-clickable div. While it does stop propagation, it doesn't prevent what should be stopped and allows things that shouldn't be clickable. js //screen has set stopPropagation $("#smokeScree ...

javascriptjqueryhtml

Change the :target in javascript

I'm struggling with a CSS challenge: #box:target { box-shadow: 0px 0px 20px black; } Here's the scenario: On my "parent" page (page1), I have a button that redirects you to another page called "page2.html#box". This causes the #box:target s ...

javascriptcsstarget

What is the best way to ensure a division's height matches that of the window using CSS?

Is it possible to create a division that covers the total width and height of the screen using just CSS without relying on JavaScript or jQuery? <div id="all"></div> I have tried setting the width and height of the element to 100%, but I am s ...

htmlcssheight

The HTML website appears to be having trouble scrolling on Android devices, however, it functions properly on both iOS and desktop platforms

Hello everyone, I need help solving an issue with my responsive HTML website. It works perfectly on a desktop browser, but when viewed on a mobile device, it gets stuck and won't scroll. Any suggestions on what might be causing this problem? Thank you ...

htmlcssweb

Expanding a JavaScript list using HTML inputs

I have a script where a grid dynamically displays a list of words. Is there a way to populate the word list in the grid using HTML? Currently, I am doing this... var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog"]; Can additional words be adde ...

javascriptjqueryhtml

Tips on personalizing the DateTimePicker component from Material-UI

I am currently working on customizing the DateTimePicker component provided by Material-UI. To access its documentation, please visit: One challenge I have encountered is the lack of styling information in the documentation. My goal is to change the main ...

cssreactjsmaterial-uidatetimepicker

CSS: Indication that the Text is Extending Beyond its Container

Seeking a solution to indicate overflow of text within its container, as demonstrated in this example. Essentially, a <span> with fixed dimensions. Looking for a visual cue when text exceeds boundaries. Attempted the use of text-overflow:ellipsis;, ...

htmltextoverflowcss

Where could I be missing the mark with AngularJS?

After following some tutorials, I managed to create my first test app. However, it doesn't seem to be working properly. The main objective of the app is to extract product information from a JSON file and display it using ng-repeat. Here are the rele ...

javascripthtmljsonangularjs

Calculating the time difference between the current datetime and a value retrieved from

I am having trouble calculating the difference between the current date and a date stored in my database. My goal is to display an expiry date message if the difference is 30 days. Here is the code snippet I currently have: var timeDifference = DateTime.N ...

c#.netasp.nethtml

Uncovering unseen tags generated by JavaScript on a webpage using Python

I have THIS LINK page that contains javascript. To view the javascript, simply click on show details. How can I extract data from this URL source? Should I use re? Here is what I attempted with re: import urllib import re gdoc = urllib.urlopen('Tha ...

javascriptpythonhtmlseleniumxpath

Using different browsers can cause web fonts to appear rough and pixelated

While exploring the issue of "jagged" or "pixelated" fonts, I made an interesting discovery. After creating a website locally and viewing it in Firefox, the font from Google Webfonts appeared flawless - almost like it was straight out of Photoshop. It wasn ...

cssfirefoxfontsfont-face

What is causing two inline-blocks not to align at the top within the parent wrapper div?

I have set up my HTML structure in the following way: <div id="wrapper"> <div id="main"> <p>test</p> </div> <div id="sidebar"> <p>test</p> </div> </div> Here is t ...

htmlcss

Scrollbar is unable to reach the bottom of the container

Currently, I am facing an issue with displaying multiple rows of products in a container. The scroll does not allow me to reach the end of the container as shown in the picture below. Is there something wrong with my current setup? And is it possible to av ...

jqueryhtmlcss

display a discrete delete button when pressing a button within ng-bootstrap

My current setup uses ng-bootstrap with Angular4. Image https://i.sstatic.net/83UhP.png In the interface, a checkbox button is used to show responses fetched from the backend. By clicking the button, the x button disappears along with other elements belo ...

htmlangularbootstrap-4ng-bootstrap

Utilizing jQuery animation, generate a zoomOut effect on a square-shaped image that adjusts to fit the width or height of the window while preserving its

Right off the bat: using scale() is not a viable option. Is there a way to dynamically animate my image, which has been scaled to 700% in width or height, back to its original CSS dimensions of auto width and height? Below are the actual dimensions of my ...

jquerycssjquery-animatezooming

Divide document using PHP and create material

Looking for a way to split the content below into separate files and remove the placeholder tags? Also, want to extract the text inside the placeholder tags and save them in a new contents file. <div class='placeholder'>The First Chapter& ...

phphtmltextfile-io