web-dev-qa-db-ja.com

CSS：画面の中央にロードインジケーターを配置する

ローディングインジケータを画面の中央に配置するにはどうすればよいですか。現在、私は小さなプレースホルダーを使用していますが、うまくいくようです。ただし、下にスクロールすると、ローディングインジケータはその事前定義された位置にそのまま留まります。スクロールに追従させて常に上に配置するにはどうすればよいですか？

#busy
{
    position: absolute;
    left: 50%;
    top: 35%;
    display: none;
    background: transparent url("../images/loading-big.gif");
    z-index: 1000;
    height: 31px;
    width: 31px;
}

#busy-holder
{
    background: transparent;
    width: 100%;
    height: 100%;        
}
csspositioncenter
27
Frank Vilea

つかいます position:fixed の代わりに position:absolute

最初のものは画面ウィンドウに関連しています。 （スクロールの影響を受けません）

2番目はページに関連しています。 （スクロールの影響を受ける）

注：IE6はposition：fixedをサポートしていません。

43
Kraz
.loader{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 
              50% 50% no-repeat rgb(249,249,249);
}
<div class="loader"></div>
19
Ananta Prasad

これは、私がAngular 4：

<style type="text/css">  
  .centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
    color:darkred;
  }
</style>

</head>

<body>
  <app-root>
        <div class="centered">
          <h1>Loading...</h1>
        </div>
  </app-root>
</body>
7
Salim

div busyの絶対位置を固定に変更します

2
Anish Joseph

このOnLoadを使用するか、DBから情報を取得するときに使用できます。

HTMLで次のコードを追加します。

<div id="divLoading">
<p id="loading">
    <img src="~/images/spinner.gif">
</p>

CSSで次のコードを追加します。

#divLoading {
  margin: 0px;
  display: none;
  padding: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  z-index: 30001;
  opacity: 0.8;}

#loading {
   position: absolute;
   color: White;
  top: 50%;
  left: 45%;}

jSで表示および非表示にする場合：

  document.getElementById('divLoading').style.display = 'none'; //Not Visible
  document.getElementById('divLoading').style.display = 'block';//Visible
1
Praveen Gopal

angular 4で私のために働いた

style="margin:0 auto;"を追加することにより

<mat-progress-spinner
  style="margin:0 auto;"
  *ngIf="isLoading"
  mode="indeterminate">
  </mat-progress-spinner>
1
naila naseem