Wie zentriert man Text innerhalb des CSS Spinner?

ich einen Ausschnitt von CSS irgendwo im Internet gefunden, die den kühlen PayPal Spinner neu erstellt, und ich machte eine Geige aus ihm heraus:Wie zentriert man Text innerhalb des CSS Spinner?

https://jsfiddle.net/55s5oxkf/5/

Es funktioniert gut, aber ich kann nicht herausfinden, wie um Text genau in der Mitte dieses Spinner zu platzieren, so etwas wie "Loading ...". Ich habe gebastelt und versucht, kann aber nichts zur Arbeit bringen.

Hier ist die CSS:

.spinner.loading { 
    display: none; 
    padding: 50px; 
    text-align: center; 
} 
.spinner.loading:before { 
    content: ""; 
    height: 90px; 
    width: 90px; 
    margin: -15px auto auto -15px; 
    position: absolute; 
    top: 35%; 
    left: 45%; 
    border-width: 8px; 
    border-style: solid; 
    border-color: #2180c0 #ccC#ccc; 
    border-radius: 100%; 
    animation: rotation .7s infinite linear; 
} 
@keyframes rotation { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(359deg); 
    } 
}

Und die HTML:

<div id="divSpinner" class="spinner loading"></div>

Platzierung von Text zwischen dem öffnenden und schließ div Elementen tut nichts. Irgendwelche Ideen?

Quelle

2017-05-19 HerrimanCoder

Sie wurden falsch informiert.Während, sicherlich nicht von ihnen erfunden, wurde dieser Loader sehr populär, wenn er in Projekten wie Polymer (Papierelemente), AngularJS, Material Design und, beeinflusst, auf Android verwendet wurde. Wahrscheinlich wurde es so von PayPal genutzt. Zum Zentrieren von Objekten im Web sollten Sie StackOverflow [Dokumentation] (http://stackoverflow.com/documentation/css/299/centering#t=201705192344345133029) lesen. –

<center> nicht mehr unterstützt wird (Mitte veraltet in html5) so verwenden, um eine Klasse Zentrum sollte :

.centered { 
    text-align: center; 
}

Dann Calc verwenden, um die richtige Position für den Laden Text zu erhalten:

.loading-text { 
    width: 90px; 
    position: absolute; 
    top: calc(50% - 15px); 
    left: calc(50% - 45px); 
    text-align: center; 
}

$("#btnLoadRecords").click(function() { 
 
    $("#divSpinner").show(); 
 
    setTimeout(function() { 
 
    $("#divSpinner").hide(); 
 
    }, 10000); 
 
});

.centered { 
 
    text-align: center; 
 
} 
 

 
.spinner.loading { 
 
    display: none; 
 
    padding: 50px; 
 
    text-align: center; 
 
} 
 

 
.loading-text { 
 
    width: 90px; 
 
    position: absolute; 
 
    top: calc(50% - 15px); 
 
    left: calc(50% - 45px); 
 
    text-align: center; 
 
} 
 

 
.spinner.loading:before { 
 
    content: ""; 
 
    height: 90px; 
 
    width: 90px; 
 
    margin: -15px auto auto -15px; 
 
    position: absolute; 
 
    top: calc(50% - 45px); 
 
    left: calc(50% - 45px); 
 
    border-width: 8px; 
 
    border-style: solid; 
 
    border-color: #2180c0 #ccC#ccc; 
 
    border-radius: 100%; 
 
    animation: rotation .7s infinite linear; 
 
} 
 

 
@keyframes rotation { 
 
    from { 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    transform: rotate(359deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div class="centered"> 
 
    <div id="divSpinner" class="spinner loading"> 
 
     <div class="loading-text">Loading ...</div> 
 
    </div> 
 

 
    <button id="btnLoadRecords" style="cursor:pointer;position: absolute; top: 52%; left: 45%;">Load Records</button> 
 
    </div> 
 
</body>

Quelle

2017-05-19 23:59:18

Sehr nett, Daniel! – HerrimanCoder

Für die HTML:

<div id="divSpinner" class="spinner loading" style="display: none;"> 
    <span>Loading…</span> 
</div>

Für die CSS, zusätzlich zu dem, was Sie haben:

.spinner.loading::before{ 
    // Remove position, top, and left properties 
    margin: -15px auto -65px auto; 
    display: block (or flex); 
}

Dies wird es mit Ihrem vorhandenen Code funktioniert, aber was du hast ist ziemlich hacky. Wenn Sie möchten, dass sich Text in Ihrem Spinner befindet, sollten Sie kein :: before-Element verwenden. Aber angesichts dessen, was Sie haben, wird dies funktionieren.

Quelle

2017-05-19 23:56:26 Ragdoll

diese den Inhalt

html wie diese

<div id="divSpinner" class="spinner loading"> 
    <p>hello</p> 
</div>

css

.spinner.loading { 
    display: none; 
    text-align: center; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 106px; 
    height: 106px; 
} 

.spinner.loading:before { 
    content: ""; 
    height: 90px; 
    width: 90px; 

    position: absolute; 
    top: 0; 
    left: 0; 
    border-width: 8px; 
    border-style: solid; 
    border-color: #2180c0 #ccC#ccc; 
    border-radius: 100%; 
    animation: rotation .7s infinite linear; 
} 


@keyframes rotation { 
    from { 
    transform: rotate(0deg); 
    } 
    to { 
    transform: rotate(359deg); 
    } 
}

Quelle

2017-05-19 23:58:11

Fügen Sie diese in Ihrem CSS:

.loading { 
    position: relative; 
    text-align: center; 
    line-height: 140px; 
    vertical-align: middle; 
}

Und dann nur füge Text in loading div zwischen span hinzu Zum Beispiel:

<div id="divSpinner" class="spinner loading"> 
    <span class="text">Loading..</span> 
</div>

Und weil Laden 8px Grenze fügen Sie diese für die Textklasse:

.text { 
    margin-left: 15px; 
}

Ich denke, so etwas wie dieses bekommen, sollten Sie gehen.

Quelle

2017-05-20 02:10:41 Denis

Wie zentriert man Text innerhalb des CSS Spinner?

Antwort

Verwandte Themen