Mokky Miah
Reputation: 1353
centre overlay spinner on any element
I am trying to create a spinner class that when assigned to any element, it should show an spinner overlay and centred.
I created this jfiddle of my current progress, but I am stuck, I can't seem to centre the spinner on the parent div.
See here: 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;
}
I tried position absolute but that affects the main div. I want to be able to assign this class to most elements and see a spinner.
Any suggestion?
Upvotes: 5
Views: 6022
Answers (3)
Ram kumar
Reputation: 3162
/*------------------------------------*\
##Loading
\*------------------------------------*/
/* Absolute Center CSS Spinner */
.u-loading {
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;
}
.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;
left: 50%;
margin: 0 auto;
overflow: visible;
position: fixed;
top: 50%;
z-index: 9999;
transform: translate(-50%, -50%);
}
.u-loading{position:relative}<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>Upvotes: 3
Aram Mkrtchyan
Reputation: 2700
Try this
.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;
}
Upvotes: 1
sdabet
Reputation: 18670
Currently your spinner is in display: inline-block.
If you want to center it in its parent you could change its style to display: block along with margin: auto.
Upvotes: 1
Related Questions
- Overlay with spinner
- Put spinner on center of image container with CSS
- CSS spinner as full page overlay
- How to center text inside CSS spinner?
- How to set a spinner into the middle of the screen with CSS?
- Centering a spinner within a div
- Center div element in an overlay over the parent div with css?
- CSS center a div thats over top of an overlay
- position an overlay in the center of the page with jquery
- my overlay is not being centered using css