css Question posted in
Some basic documentation can be found here.

Css – How to dynamically center this spinner on the screen?

I am using a spinner:

/*

*/
'use strict';
function Spinner(){
    Spinner.element=document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    let c=document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    Spinner.element.setAttribute('width','100');
    Spinner.element.setAttribute('height','100');
    c.setAttribute('viewBox','0 0 100 100');
    c.setAttribute('cx','50');
    c.setAttribute('cy','50');
    c.setAttribute('r','42');
    c.setAttribute('stroke-width','16');
    c.setAttribute('stroke','#2196f3');
    c.setAttribute('fill','transparent');
    Spinner.element.appendChild(c);
    Spinner.element.style.cssText='position:absolute;left:calc(50% - 50px);top:calc(50% - 50px)';
    document.body.appendChild(Spinner.element)
}
Spinner.id=null;
Spinner.element=null;
Spinner.show=function(){
    const c=264,m=15;
    Spinner.element.style.display='block';
    move1();
    function move1(){
        let i=0,o=0;
        move();
        function move(){
            if(i==c)move2();
            else{
                i+=4;o+=8;
                Spinner.element.setAttribute('stroke-dasharray',i+' '+(c-i));
                Spinner.element.setAttribute('stroke-dashoffset',o)
                Spinner.id=setTimeout(move,m)
            }
        }
    }
    function move2(){
        let i=c,o=c*2;
        move();
        function move(){
            if(i==0)move1();
            else{
                i-=4;o+=4;
                Spinner.element.setAttribute('stroke-dasharray',i+' '+(c-i));
                Spinner.element.setAttribute('stroke-dashoffset',o)
                Spinner.id=setTimeout(move,m)
            }
        }
    }
};
Spinner.hide=function(){
    Spinner.element.style.display='none';
    if(Spinner.id){
        clearTimeout(Spinner.id);
        Spinner.id=null
    }
    Spinner.element.setAttribute('stroke-dasharray','0 264');
    Spinner.element.setAttribute('stroke-dashoffset','0')
};

Here is how I call it in my js code :

document.addEventListener("DOMContentLoaded", function(){
    Spinner();
    Spinner.hide();
    ...
    Spinner.show();
});

At runtime it is not displayed at the center of the screen:

enter image description here

So how to make it displayed at the center of the screen?

Tags:

2

Answers


  1. 0

    The issue with your code is that you are using calc(50% – 50px) to calculate the position of the spinner. This calculation is based on the width of the spinner, which is 100px. However, when you set the left and top properties of the spinner to calc(50% – 50px), it is actually calculating the position relative to the width of the parent container, which is the body of the document in this case. The body’s width is not the same as the width of the viewport, so the spinner is not being positioned correctly.

    To fix this issue, you can use the window.innerWidth and window.innerHeight properties to get the width and height of the viewport. Then, you can calculate the position of the spinner relative to the center of the viewport.

    Hope this works for you.

    Login or Signup to reply.
  2. 0

    When centering with position absolute, you should translate the element to take in account the width of itself:

    .Spinner {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search