Вертикально По Центру Загрузка Spinner Оверлей

Я хотел бы показать вертикально центрированный загрузочный счетчик, как один из этих https://github.com/jlong/css-spinners на веб-странице. Следуйте за codepen.io ссылка на этой странице, чтобы увидеть их в движении.

Как я могу сделать это через CSS? Рассмотрим, что я имею дело с приложением Google App Engine на основе Python, Twitter Bootstrap и Polymer.

6
css html5 polymer twitter-bootstrap

3 ответов

предположим, вы идете с" Плюс " spinner. Вы можете обернуть это в фиксированное положение div, которое охватывает всю страницу:

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

поскольку вы можете иногда использовать разные блесны, которые имеют разную ширину, CSS не должен жестко кодировать ширину. Вы можете центрировать элемент по вертикали в flexbox, а затем использовать margin: 0 auto; по этому пункту будет центрироваться.

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

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

таким образом, вы можете даже покрасить фон, сделать его полупрозрачным и т. д.

здесь JSFiddle

18

Я ничего не знаю о Google App 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

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