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?
/*------------------------------------*\
##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>
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;
}
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.
Related
iframe {
box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.144),
0 12px 30px 0 rgba(0, 0, 0, 0.377);
}
iframe:hover {
filter: brightness(95%);
transition: 0.5s ease-in-out;
animation: iframes 0.8s linear both 1;
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.212),
0 16px 35px 0 rgba(0, 0, 0, 0.493);
}
#keyframes iframes {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(7deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-7deg);
}
100% {
transform: rotate(0deg) ;
}
}
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14023.546898520377!2d77.2038604!3d28.5130556!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd87ca9af3beebff5!2sShrishti%20Flower!5e0!3m2!1sen!2sin!4v1613667773659!5m2!1sen!2sin" width="60%" height="400" frameborder="0" style="border:2.7px blue solid; margin-bottom: 2rem; border-radius: 1rem; " allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<!-- iframe --!>
when I hover on this iframe it starts to shaking rapidly and the animation trigger more than once. I don't know why this happens . pls help me to solve it.
The shaking rapidly part I do not experience with your code snippet, the repeated animation is caused by having the animation on hover, this will reset the count everytime a user hovers the iframe.
By setting the animation on the iframe itself you can prevent this. You set start the animation on hover with animation-play-state.
iframe {
box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.144),
0 12px 30px 0 rgba(0, 0, 0, 0.377);
animation: iframes 0.8s linear both 1;
animation-play-state: paused;
}
iframe:hover {
filter: brightness(95%);
transition: 0.5s ease-in-out;
animation-play-state: running;
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.212),
0 16px 35px 0 rgba(0, 0, 0, 0.493);
}
#keyframes iframes {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(7deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-7deg);
}
100% {
transform: rotate(0deg) ;
}
}
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14023.546898520377!2d77.2038604!3d28.5130556!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd87ca9af3beebff5!2sShrishti%20Flower!5e0!3m2!1sen!2sin!4v1613667773659!5m2!1sen!2sin" width="60%" height="400" frameborder="0" style="border:2.7px blue solid; margin-bottom: 2rem; border-radius: 1rem; " allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
Please add "animation-iteration-count" to "infinite" for the shaking rapidly.
iframe {
box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.144),
0 12px 30px 0 rgba(0, 0, 0, 0.377);
}
iframe:hover {
filter: brightness(95%);
transition: 0.5s ease-in-out;
animation: iframes 0.8s linear both 1;
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.212),
0 16px 35px 0 rgba(0, 0, 0, 0.493);
animation-iteration-count:infinite;
}
#keyframes iframes {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(7deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-7deg);
}
100% {
transform: rotate(0deg) ;
}
}
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14023.546898520377!2d77.2038604!3d28.5130556!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd87ca9af3beebff5!2sShrishti%20Flower!5e0!3m2!1sen!2sin!4v1613667773659!5m2!1sen!2sin" width="60%" height="400" frameborder="0" style="border:2.7px blue solid; margin-bottom: 2rem; border-radius: 1rem; " allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
I'm studying HTML/CSS and I found a very interesting example of rotating box shadows. I thought I'd try to use it, but I can't get my head around rotating the shadows around my text.
The example I found has a like <div class="rotate-shadows"></div> and CSS like this:
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.rotate-shadows {
width: 220px;
height: 220px;
position: relative;
}
.rotate-shadows:after,
.rotate-shadows:before {
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.rotate-shadows:before {
box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
animation: rotate-before 2s -0.5s linear infinite;
}
.rotate-shadows:after {
box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
animation: rotate-after 2s -0.5s linear infinite;
}
#keyframes rotate-after {
0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
50% {transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);}
100% {transform: rotateZ(360deg) scaleX(1) scaleY(1);}
}
#keyframes rotate-before {
0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
50% {transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);}
100% {transform: rotateZ(-360deg) scaleX(1) scaleY(1);}
}
<div class="rotate-shadows"></div>
I figured out that I don't need body {}, figured out where I can change the color of the shadows, scale, etc. But I can't get which part is responsible for the shape of the shadows.
Can I make the shadows go around my text like an animated frame:
Классная шляпная шляпа с широкими полями всего за два куська. Да-да!
Это не опечатка! Всего два динозаврических укуса и шляпа ваша!
Where do I need to put my text to have shadows rotating around it?
And how can I change the shape of shadows?
I just want to understand.
If I understood your requirement correctly is this what you need?
I added an extra div inside to wrap the text if that is not an issue? this div acts based on the parent's position. making it in the middle.
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.rotate-shadows {
width: 220px;
height: 220px;
position: relative;
}
#text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
}
.rotate-shadows:after,
.rotate-shadows:before {
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.rotate-shadows:before {
box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
animation: rotate-before 2s -0.5s linear infinite;
}
.rotate-shadows:after {
box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
animation: rotate-after 2s -0.5s linear infinite;
}
#keyframes rotate-after {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
}
100% {
transform: rotateZ(360deg) scaleX(1) scaleY(1);
}
}
#keyframes rotate-before {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
}
100% {
transform: rotateZ(-360deg) scaleX(1) scaleY(1);
}
}
<div class="rotate-shadows">
<div id="text">
Once upon a time in Stackoverflow!!
</div>
</div>
If you need the content in the single Div then:
body {
height: 100vh;
}
.rotate-shadows {
width: 220px;
height: 220px;
position: absolute;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
display: flex;
text-align: center;
vertical-align: middle;
top: 50%;
left: 50%;
}
.rotate-shadows:after,
.rotate-shadows:before {
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.rotate-shadows:before {
box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
animation: rotate-before 2s -0.5s linear infinite;
}
.rotate-shadows:after {
box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
animation: rotate-after 2s -0.5s linear infinite;
}
#keyframes rotate-after {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
}
100% {
transform: rotateZ(360deg) scaleX(1) scaleY(1);
}
}
#keyframes rotate-before {
0% {
transform: rotateZ(0deg) scaleX(1) scaleY(1);
}
50% {
transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
}
100% {
transform: rotateZ(-360deg) scaleX(1) scaleY(1);
}
}
<div class="rotate-shadows"> Once upon a time in Stackoverflow!!
</div>
I have a panel with components inside and once the submit button is pressed, an overlay appears, but is not covering the entire parent panel (see picture) when I have scrolled all the way to the bottom. Also, the spinner need to be always in the center whether I am scrolling or not. I used position: fixed; but I don't know if that's the best practice.
CSS
.pay-storage-container {
$inner-padding: 16px;
height: 100vh;
position: fixed;
right: 0;
top: 0;
width: 325px;
z-index: 2;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
background-color: #fff;
.loading-container {
position: absolute;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
height: 100%;
top: 0;
left: 0;
img {
position: fixed;
top: 50%;
right: 18%;
animation: spinner 1s linear infinite;
}
}
}
HTML
<div class="pay-storage-container {{toggleSideBar ? 'showSideBar' : 'closeSideBar'}}">
<div class="header-container">
<div class="header">Pay Storage</div>
<span class='close-icon csx-common_delete' (click)="onToggleSideBar(false)"></span>
</div>
<div class="pay-storage-inner">
<app-equipment-summary [equipmentSummary]='equipmentSummary'></app-equipment-summary>
<app-credit-card #creditCardForm></app-credit-card>
<div class="loading-container" *ngIf="isLoading">
<img src="assets/spinner.svg" alt="">
</div>
</div>
<div class="footer-container">
<!-- <button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='!creditCardForm.creditCardForm.valid || isLoading'
(click)="onSubmitPayment()"></button> -->
<button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='isLoading' (click)="onSubmitPayment()"></button>
</div>
<div *ngIf="paymentMessage$ | async as message" class="pay-storage-inner pay-storage-success">
<app-payment-success [paymentSuccess]="paymentSuccess" (close)="onToggleSideBar($event)"></app-payment-success>
</div>
</div>
I don't think that there is anything wrong with using position:fixed to keep your spinner in the center of the page.
Also, if you want to fully overlay your content then your loading-container needs to be at the very bottom of the content you want overlayed. This code below should just overlay pay-storage-container:
<div class="pay-storage-container {{toggleSideBar ? 'showSideBar' : 'closeSideBar'}}">
<div class="header-container">
<div class="header">Pay Storage</div>
<span class='close-icon csx-common_delete' (click)="onToggleSideBar(false)"></span>
</div>
<div class="pay-storage-inner">
<app-equipment-summary [equipmentSummary]='equipmentSummary'></app-equipment-summary>
<app-credit-card #creditCardForm></app-credit-card>
</div>
<div class="footer-container">
<!-- <button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='!creditCardForm.creditCardForm.valid || isLoading'
(click)="onSubmitPayment()"></button> -->
<button pButton type="button" label="Submit Payment" class="x-primary-green-400" [disabled]='isLoading' (click)="onSubmitPayment()"></button>
</div>
<div *ngIf="paymentMessage$ | async as message" class="pay-storage-inner pay-storage-success">
<app-payment-success [paymentSuccess]="paymentSuccess" (close)="onToggleSideBar($event)"></app-payment-success>
</div>
<div class="loading-container" *ngIf="isLoading">
<img src="assets/spinner.svg" alt="">
</div>
</div>
I am sharing a sample code snippet which centers overlay spinner for all dimensions. You can edit your CSS accordingly to achieve centered spinner with overlay.
/* Absolute Center Spinner */
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-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);
}
}
<div class="loading">Loading…</div>
`
I have this div with two spans inside, I made loader which has circle filling with red color, over and over again. Everything is working great in Chrome but on EGDE this circle is so buggy that makes no sense.
When I inspect it on EDGE I get everything stricken through for a span, transform, animation... But when I check it on Can I use, it says that every browser is compatible. Is there any prefix or anything that can fix this problem on edge. I tried to put compatibility meta tag in HEAD, doesn't work.
HTML
<section>
<div><span></span><span></span></div>
</section>
CSS
#-webkit-keyframes flip {
50% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50.1% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
100% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
}
#keyframes flip {
50% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50.1% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
100% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
}
#-webkit-keyframes load-one {
0% {
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
49% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(179deg);
transform: translate3d(-25%, -50%, 0) rotate(179deg);
box-shadow: 0 3em 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
}
#keyframes load-one {
0% {
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
49% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(179deg);
transform: translate3d(-25%, -50%, 0) rotate(179deg);
box-shadow: 0 3em 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
}
#-webkit-keyframes load-two {
0% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
75% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(179deg);
transform: translate3d(112.5%, 50%, 0) rotate(179deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
80% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
}
#keyframes load-two {
0% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
75% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(179deg);
transform: translate3d(112.5%, 50%, 0) rotate(179deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
80% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
}
section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 8em;
width: 8em;
background-color: rgba(211,211,211,0.7);
border-radius: 50%;
}
.gray-circle{
background: gray;
width: 8em;
height: 8em;
display: flex;
align-items
}
div {
width: 3em;
height: 3em;
position: relative;
border-radius: 50%;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-animation: flip 3s infinite;
animation: flip 3s infinite;
}
div span {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
background: #fff;
}
div span:before {
content: '';
z-index: -1;
position: absolute;
background: #fd395b;
top: -50%;
bottom: -50%;
width: 400%;
}
div span:nth-of-type(1) {
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
left: 50%;
right: 0;
}
div span:nth-of-type(1):before {
right: 0;
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-animation: load-one 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate;
animation: load-one 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate;
}
div span:nth-of-type(2) {
border-top-left-radius: 5em;
border-bottom-left-radius: 5em;
right: 50%;
left: 0;
}
div span:nth-of-type(2):before {
right: 50%;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation: load-two 1.5s cubic-bezier(0, 0.65, 0.35, 1) infinite alternate;
animation: load-two 1.5s cubic-bezier(0, 0.65, 0.35, 1) infinite alternate;
}
Codepen
Unfortunately certain webkit functions do not currently work on Edge. You can submit a feature request here: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer
Although certain webkit functions have supposedly been in development since 2016 and still have yet to be properly implemented into the browser.
I have this code which allows the object to motion blur side to side however I want it to motion blue vertically so it goes from up to down and then back to up. Could you please help me out?
http://jsfiddle.net/db8gr4y6/
#outer {
position: relative;
margin: 10px;
}
#mb {
position: absolute;
left: 0;
font-size: 2em;
font-weight: bold;
padding: 0.2em 1em;
color: #fff;
background-color: #600;
border: 0.2em solid #c00;
border-radius: 8px;
text-shadow: 0 0 5px rgba(255, 255, 255, 0);
box-shadow: 0 0 2px rgba(200, 0, 0, 0);
-webkit-animation: motionblur 4s ease-in-out infinite;
animation: motionblur 4s ease-in-out infinite;
}
#-webkit-keyframes motionblur {
0% {
left: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scaleX(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleX(1.1) skewX(-4deg);
}
50% {
left: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleX(1) skewX(0deg);
}
55% {
left: 300px;
-webkit-transform-origin: 100% 0;
-webkit-transform: scaleX(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleX(1.1) skewX(4deg);
}
100% {
left: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleX(1) skewX(0deg);
}
}
#keyframes motionblur {
0% {
left: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
left: 0;
transform-origin: 0 0;
transform: scaleX(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
transform: scaleX(1.1) skewX(-4deg);
}
50% {
left: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
transform: scaleX(1) skewX(0deg);
}
55% {
left: 300px;
transform-origin: 100% 0;
transform: scaleX(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
transform: scaleX(1.1) skewX(4deg);
}
100% {
left: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
transform: scaleX(1) skewX(0deg);
}
<div id="outer">
<div id="mb">Motion Blur</div>
</div>
Try this to reverse animation.
Just replace all left attributes into Top
And all transform property of X, ScaleX and SkewX to SkewX SkewY
#outer {
position: relative;
margin: 10px;
}
#mb {
position: absolute;
left: 0;
font-size: 2em;
font-weight: bold;
padding: 0.2em 1em;
color: #fff;
background-color: #600;
border: 0.2em solid #c00;
border-radius: 8px;
text-shadow: 0 0 5px rgba(255, 255, 255, 0);
box-shadow: 0 0 2px rgba(200, 0, 0, 0);
-webkit-animation: motionblur 4s ease-in-out infinite;
animation: motionblur 4s ease-in-out infinite;
}
#-webkit-keyframes motionblur {
0% {
top: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
top: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scaleY(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(-4deg);
}
50% {
top: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
55% {
left: 300px;
-webkit-transform-origin: 100% 0;
-webkit-transform: scaleY(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(4deg);
}
100% {
top: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
}
#keyframes motionblur {
0% {
top: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
top: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scaleY(0.85);
}
25% {
text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(-4deg);
}
50% {
top: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
55% {
top: 300px;
-webkit-transform-origin: 100% 0;
-webkit-transform: scaleY(0.85);
}
75% {
text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
-webkit-transform: scaleY(1.1) skewY(4deg);
}
100% {
top: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
<div id="outer">
<div id="mb">Motion Blur</div>
</div>