我想創建一個微調類,當分配給任何元素時,它應該顯示一個微調器覆蓋和居中。任何元素上的中心覆蓋微調器
我創建了這個jfiddle我當前的進度,但我卡住了,我似乎無法將微調中心父母的div。
在這裏看到:Example
HTML:
<div class="u-loading">
<div class="address-container u-border-all">
<input type="text" class="address__textbox address__textbox--line u-border-bottom">
<input type="text" class="address__textbox address__textbox--house-no u-border-right">
<input type="text" class="address__textbox address__textbox--street">
<input type="text" class="address__textbox address__textbox--line">
<input type="text" class="address__textbox address__textbox--line">
<input type="text" class="address__textbox address__textbox--line">
<input type="text" class="address__textbox address__textbox--postcode u-border-right u-border-top">
<select class="address__textbox address__country u-border-top">
<option value="Select a country" selected="selected" class="rps-placeholder">Select a country</option>
<option value="England">England</option>
<option value="Wales">Wales</option>
<option value="Scotland">Scotland</option>
</select>
</div>
</div>
CSS:
/*------------------------------------*\
##Loading
\*------------------------------------*/
/* Absolute Center CSS Spinner */
.u-loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
.u-loading:not(:required):after {
width: 100%;
height: 100%;
z-index: 9999;
overflow: visible;
position: relative;
content: '';
display: inherit;
font-size: 10px;
width: 1em;
height: 1em;
margin: 0 auto;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}
/* Animation */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.u-border-all {
border: solid black 2px;
}
.address-container {
height: 200px;
width: 200px;
}
我試過位置絕對,但影響的主要股利。我希望能夠將這個類分配給大多數元素並看到一個微調。
有什麼建議嗎?
微調對準應該verically和水平居中? – Kumar 2015-04-02 13:38:47
@kumar yes – 2015-04-02 13:51:05
然後你可以設置 position:absolute; top:50%; 剩餘:50%; 在這個選擇器上.u-loading:not(:required):: after – Kumar 2015-04-02 13:55:26