垂直居中的加载旋转器叠加 [英] Vertically Centered Loading Spinner Overlay

问题描述

我想展示一个垂直居中的加载微调器，就像其中一个 https://github.com/jlong​​/css-spinners 在网页中.按照该页面上的 codepen.io 链接查看它们的动态.

我怎样才能通过 CSS 做到这一点?假设我正在处理一个基于 Python、Twitter Bootstrap 和 Polymer 的 Google App Engine 应用程序.

解决方案

假设您使用Plus"微调器.您可以将其包装在覆盖整个页面的固定位置 div 中:

<div class="plus">正在加载...

由于有时您可能想要使用不同的微调器，它们具有不同的宽度，因此 CSS 不应硬编码宽度.您可以在 flexbox 中垂直居中一个项目，然后在项目上使用 margin: 0 auto; 以水平居中.

#pluswrap {位置:固定；宽度:100%；高度:100%；显示:弹性；对齐项目:居中；顶部:0；}.plus {显示:弹性；边距:0 自动；}

这样，您甚至可以为背景着色，使其半透明等.

这是一个 JSFiddle

I would like to show a vertically centered loading spinner like one of these https://github.com/jlong/css-spinners in a web page. Follow the codepen.io link on that page to see them in motion.

How can I do this via CSS? Consider I am dealing with a Google App Engine application based on Python, Twitter Bootstrap and Polymer.

解决方案

Let's assume you go with the "Plus" spinner. You can wrap this in a fixed position div that covers the whole page:

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

Since you might want to use different spinners at times, which have a different width, the CSS shouldn't hardcode the width. You can center an item vertically in a flexbox, and then use margin: 0 auto; on the item to be centered horizontally.

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

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

This way, you can even color the background, make it semi-transparent etc.

Here's a JSFiddle

这篇关于垂直居中的加载旋转器叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！