Question

我在屏幕中央显示了加载程序和进度条，但是加载程序和进度条的位置根据屏幕分辨率而有所不同。不管分辨率如何，如何将其放置在屏幕中央的任何想法。

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

我希望将加载器和进度条放置在屏幕中央，而不考虑屏幕的分辨率或高度。有人知道怎么做吗？

Answer 1

您可以使用display: flex;来使内容居中并获得响应。

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

Answer 2

有很多方法可以使项目居中。我会给你2个：

第一：display: flex，方法是将进度条包装在带有width:100vw和height:100vh的div中：

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

秒：position:absolute和transform:translate(-50% , -50%)

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

Answer 3

对于“进度”，您可以使用一些计算来确保它始终位于中心：

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

这也将使rigth等于37.5%，并且它将始终位于中心。

对于旋转加载器：在转换动画中，在translate(-50%,-50%)之前添加rotate(0deg)。

您可以看到示例。请注意，由于代码段较小，我减小了旋转和进度大小。

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>

如何在不考虑屏幕分辨率的情况下将装载器放置在屏幕中央？

3 个答案: