web-dev-qa-db-ja.com

垂直方向に中央に配置されたローディングスピナーオーバーレイ

これらのいずれかのような垂直方向に中央に配置されたローディングスピナーをWebページに表示したいと思います https://github.com/jlong​​/css-spinners 。そのページのcodepen.ioリンクをたどって、それらが動いていることを確認してください。

CSSを介してこれを行うにはどうすればよいですか？ Python、Twitter Bootstrap、Polymer）に基づくGoogle AppEngineアプリケーションを扱っていると考えてください。

csshtml5twitter-bootstrappolymer
6
lowcoupling

「プラス」スピナーを使用するとします。これを、ページ全体をカバーする固定位置divでラップできます。

<div id="pluswrap">
  <div class="plus">
    Loading...
  </div>
</div>

幅が異なるさまざまなスピナーを使用したい場合があるため、CSSで幅をハードコーディングしないでください。フレックスボックスでアイテムを垂直方向に中央揃えにしてから、水平方向に中央揃えにするアイテムでmargin: 0 auto;を使用できます。

#pluswrap {
position: fixed;
width: 100%;
height:100%;
display: flex;
align-items: center;
top: 0;
}

.plus {
  display: flex;
  margin: 0 auto;
}

このようにして、背景に色を付けたり、半透明にすることもできます。

これが JSFiddle

21
George Kormaris

恐れているGoogleApp Engineについては何も知りませんが、幅と高さのある要素を中央に配置するのは非常に簡単です。

これは固定位置の要素だと思いますので、上、右、左、下を使用してから、margin：autoを使用して垂直方向と水平方向の中央に配置します。

例えば.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.spinner{
    position:fixed;
    z-index:99;/* make higher than whatever is on the page */
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    background:red;
    width:100px;
    height:100px;
}
</style>
</head>

<body>
<div class="spinner"></div>
</body>
</html>
1
Paul O'B

HTML

<div id="pluswrap">
  <div class="plus">
    Loading...
  </div>
</div>

CSS

#pluswrap {
  position: fixed;
  width: 100%;
  height:100%;
  display: flex;
  top: 0;
}

.plus {
  margin: auto;
}

親へのdisplay:flexとmargin: autoのみが必要なことを行います。

これが JS Fiddle

0
Gags