it-swarm.com.de

CSS: Positionsanzeige in der Bildschirmmitte

Wie kann ich mein Ladekennzeichen in der Mitte des Bildschirms positionieren? Derzeit verwende ich einen kleinen Platzhalter und es scheint gut zu funktionieren. Wenn ich jedoch nach unten scrolle, bleibt die Ladeanzeige an dieser vordefinierten Position. Wie kann ich es dem Scrollen folgen lassen, so dass es immer oben sitzt?

#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%;        
}
22
Frank Vilea

verwenden Sie position:fixed anstelle von position:absolute

Der erste ist relativ zu Ihrem Bildschirmfenster. (vom Scrollen nicht betroffen)

Der zweite ist relativ zur Seite. (vom Scrollen betroffen)

Hinweis : IE6 unterstützt keine Position: behoben.

36
Kraz

.loader{
 position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../img/loaderred.gif') 50% 50% no-repeat rgb(249,249,249);
}
<div class="loader"></div>

16
L Ananta Prasad

Das habe ich für Angular 4 getan:

<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>
2
Salim

Ändern Sie die absolute Position von div busy in fixed

2
Anish Joseph

Arbeitete für mich in eckig 4 

durch Hinzufügen von style="margin:0 auto;"

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

Sie können dieses OnLoad oder während des Abrufs von Informationen aus der DB verwenden

Fügen Sie in HTML folgenden Code hinzu:

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

In CSS folgenden Code hinzufügen:

#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%;}

wenn Sie JS anzeigen und ausblenden möchten:

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