CSS: Position Loading Indicator in The Center of The Screen

CSS: Position loading indicator in the center of the screen

use position:fixed instead of position:absolute

The first one is relative to your screen window. (not affected by scrolling)

The second one is relative to the page. (affected by scrolling)

Note : IE6 doesn't support position:fixed.

How to center a div (CSS loader)

Give below css to .loader class:

  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:fixed;

.loader {  border: 16px solid #f3f3f3;  border-radius: 50%;  border-top: 16px solid #3498db;  width: 120px;  height: 120px;  -webkit-animation: spin 2s linear infinite;  animation: spin 2s linear infinite;  margin:auto;  left:0;  right:0;  top:0;  bottom:0;  position:fixed;}
@-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"></div>

Center Loading Css in entire page

You can use the below CSS inside .spinner:

transform: translate(calc(-50%), calc(-50%));
position: fixed; /* if absolute doesn't work */
margin: 0; /* no need of margin */

How to set a spinner into the middle of the screen with CSS?

Since the element has a fixed width of 8em, you could add left: 50% and then displace half of the element's width using margin-left: -4px:

Updated Example

.loader {
  left: 50%;
  margin-left: -4em;
}

If the dimensions of the element aren't fixed and known in advance, see my other answer for alternative options.

Center Activity Indicator with absolute position in React Native

If you want to center the ActivityIndicator on the screen, you can set the style like this.

      <View style={{ flex: 1, alignItems: "center", justifyContent: "center", zIndex: 20 }}>
        <ActivityIndicator
          size="large" color={colors.color4}
        />
      </View>

orYou can use style'sposition

      <View style={styles.whiteOverlay}  >
        <ActivityIndicator
          size="large" color={colors.color4} 
        />
      </View >
...
 whiteOverlay: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'      
 }

How to center a spinner horizontally and vertically in page?

Since it is fixed, the top|left|right|bottom attributes are relative to the window. So a position in percentages, in this case 50% should do the trick.

.spinner {
  display: block;
  position: fixed;
  z-index: 1031; /* High z-index so it is on top of the page */
  top: 50%;
  right: 50%; /* or: left: 50%; */
  margin-top: -..px; /* half of the elements height */
  margin-right: -..px; /* half of the elements width */
}

Alternative, given by Utkanos in the comments

.spinner {
  display: block;
  position: fixed;
  z-index: 1031; /* High z-index so it is on top of the page */
  top: calc( 50% - ( ...px / 2) ); /* where ... is the element's height */
  right: calc( 50% - ( ...px / 2) ); /* where ... is the element's width */
}

How to display loading.gif at the center of the screen which has a scrollbar

in your CSS, try changing position:absolute; with position:fixed;

---

Related Topics