任何元素上的中心覆蓋微調器

Question

我想創建一個微調類，當分配給任何元素時，它應該顯示一個微調器覆蓋和居中。

我創建了這個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; 
} 

我試過位置絕對，但影響的主要股利。我希望能夠將這個類分配給大多數元素並看到一個微調。

有什麼建議嗎？

Answer 1

請更新該CSS

.u-loading:not(:required)::after { 
 
    animation: 1500ms linear 0s normal none infinite running spinner; 
 
    border-radius: 0.5em; 
 
    box-shadow: 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 rgba(0, 0, 0, 0.75); 
 
    content: ""; 
 
    display: inherit; 
 
    font-size: 10px; 
 
    height: 1em; 
 
    left: 50%; 
 
    margin: 0 auto; 
 
    overflow: visible; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 1em; 
 
    z-index: 9999; 
 
} 
 
.u-loading{position:relative}

Answer 2

目前你的微調是在display: inline-block。

如果您想將它置於其父母中，您可以將其樣式更改爲display: block以及margin: auto。

Answer 3

試試這個

.u-loading:not(:required)::after { 
    animation: 1500ms linear 0s normal none infinite running spinner; 
    border-radius: 0.5em; 
    box-shadow: 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 rgba(0, 0, 0, 0.75); 
    content: ""; 
    display: inherit; 
    font-size: 10px; 
    height: 1em; 
    left: 50%; 
    margin: 0 auto; 
    overflow: visible; 
    position: absolute; 
    top: 50%; 
    width: 1em; 
    z-index: 9999; 
}