how to place a loader in the center of the screen irrespecitve of the screen resolution?

Question

I am showing a loader and a progress bar in the center of the screen but the loader and progress bar placement varies according to the screen resolution. Any idea how to place it in the center of the screen irrespective of the resolution.

//showProgressBar();
//let showProgressBar = () => {
var bar = new ProgressBar.Line('#downloadProgress', {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {
    width: '100%',
    height: '36%'
  },
  text: {
    style: {
      // Text color.
      // Default: same as stroke color (options.color)
      color: '#fff',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  from: {
    color: '#FFEA82'
  },
  to: {
    color: '#ED6A5A'
  },
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});
bar.animate(1.0); // Number from 0.0 to 1.0
//}

#myOverlay {
  position: absolute;
  height: 100%;
  width: 100%;
}

#myOverlay {
  background: black;
  opacity: .7;
  z-index: 2;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}


/* Safari */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Loader */


/* Progress Bar */

#downloadProgress {
  z-index: 3;
  position: absolute;
  top: 62%;
  width: 25%;
  left: 42%;
  height: 25px;
  text-align: center;
  line-height: 30px;
  color: white;
  border-radius: 5px;
}

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
  <style type="text/css">
    /* Progress Bar */
  </style>
</head>

<body>
  <div id="myOverlay"></div>
  <div id="loadingGIF" class="loader"></div>
  <div id="downloadProgress"></div>
</body>
<script type="text/javascript">
</script>

</html>

I want the loader and progress bar placement in the center of the screen irrespective of the resolution or height of the screen. Anyone any idea how to do it?

Possible duplicate of [CSS: Position loading indicator in the center of the screen](https://stackoverflow.com/questions/6256043/css-position-loading-indicator-in-the-center-of-the-screen) — Sumit Patel, Jul 30 '19 at 06:01
Instead of position: absolute use position: fixed that would work — Mohammad Aslam, Jul 30 '19 at 06:03

score 2 · Answer 1 · answered Jul 30 '19 at 06:03

You can use display: flex; to center content and achieve responsiveness.

.loader-container {
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
}

.loader {
  z-index: 3;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}


/* Safari */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="loader-container">
  <div id="loadingGIF" class="loader"></div>
</div>

score 0 · Answer 2 · answered Jul 30 '19 at 06:18

0

there is a lot of way to center items. i will give you 2 of them :

1st: display: flex by wrapping your progress bar inside a div with a width:100vw and height:100vh:

.progress-container{
width:100vw;
height:100vh;
display:flex;
justify-content:space-between;
align-items:center;
}

second: position:absolute with transform:translate(-50% , -50%)

.progress-bar{
position:absolute;
top:50%;
left:50%;
transform:translate(-50% , -50%)
}

answered Jul 30 '19 at 06:18

adel

3,436
1
7
20

second one won't work like that because he had animation which is affecting the transform property. it should be edited from animation keyframe – Kareem Dabbeet Jul 30 '19 at 06:27

score 0 · Answer 3 · answered Jul 30 '19 at 06:26

For The Progress you can use some calculation to insure it'll be always in the center:

   #downloadProgress {
        width: 25%;
        left: 37.5%;
    }

this will make rigth equals 37.5% too and it'll always be in the center.

for the spin loader: add translate(-50%,-50%) before rotate(0deg) in transform animation.

You can see the example. note that I've reduced spin and progress size because of small size of snippet.

var bar = new ProgressBar.Line('#downloadProgress', {
      strokeWidth: 4,
      easing: 'easeInOut',
      duration: 1400,
      color: '#FFEA82',
      trailColor: '#eee',
      trailWidth: 1,
      svgStyle: {width: '100%', height: '36%'},
      text: {
        style: {
          // Text color.
          // Default: same as stroke color (options.color)
          color: '#fff',
          position: 'absolute',
          right: '0',
          top: '30px',
          padding: 0,
          margin: 0,
          transform: null
        },
        autoStyleContainer: false
      },
      from: {color: '#FFEA82'},
      to: {color: '#ED6A5A'},
      step: (state, bar) => {
        bar.setText(Math.round(bar.value() * 100) + ' %');
      }
    });
    bar.animate(1.0);  // Number from 0.0 to 1.0

#myOverlay{position:absolute;height:100%;width:100%;}
    #myOverlay{background:black;opacity:.7;z-index:2;}
    .loader {
        position:absolute;
        top:50%;left:50%;z-index:3;
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 75px;
        height: 75px;
        transform: translate(-50%,-50%);
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
    }
    /* Safari */
    @-webkit-keyframes spin {
        0% { -webkit-transform: translate(-50%,-50%) rotate(0deg) ; }
        100% { -webkit-transform: translate(-50%,-50%) rotate(360deg);}
    }
    @keyframes spin {
        0% { transform: translate(-50%,-50%) rotate(0deg)  }
        100% { transform: translate(-50%,-50%) rotate(360deg)  }
    }
    /* Loader */

    /* Progress Bar */
    #downloadProgress {
        z-index: 3;
        position: absolute;
        top: 70%;
        width: 25%;
        left: 37.5%;
        height: 25px;
        text-align: center;
        line-height: 30px;
        color: white;
        border-radius: 5px;

    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>

<div id="myOverlay"></div>
<div id="loadingGIF" class="loader"></div>
<div id="downloadProgress"></div>

how to place a loader in the center of the screen irrespecitve of the screen resolution?

3 Answers3