I'm targeting this questions to browsers with versions same or above:
IE 11
Chorme 69
Firefox 62
I have simple css animation which runs fine on all of above browsers:
span.loader {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
font-size: 10px;
text-indent: -12345px;
border-top: 1px solid rgba(0,0,0, 0.08);
border-right: 1px solid rgba(0,0,0, 0.08);
border-bottom: 1px solid rgba(0,0,0, 0.08);
border-left: 1px solid rgba(0,0,0, 0.5);
border-radius: 50%;
animation: spinner 700ms infinite linear;
z-index: 100001;
}
#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);
}
}
When I run this animation and execute some expensive javascript code animation stops in IE11 but not in Chrome or Firefox.
Does it mean that FF and Chrome are running css animations in separate thread apart form javascript thread and IE does not? Am I missing something?
IT Man
Related
It seems like the font-size with animations doesn't work correctly. Anything below font-size: 6px doesn't change the size of the element. This seems to be a new things and works correctly in Firefox. See example below.
Edit:
Chrome Version: 73.0.3683.86 (Official Build) (64-bit)
Minimum font size is set to Tiny
Chrome
Firefox
https://jsfiddle.net/72tdqxme/7/
.loader {
margin-left: 2em;
display: inline-block;
vertical-align: bottom;
font-size: 2px;
position: relative;
border-top: 1.1em solid rgba(255, 255, 255, 0.5);
border-right: 1.1em solid rgba(255, 255, 255, 0.5);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.5);
border-left: 1.1em solid #ffffff;
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.loader, .loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
#-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(.3);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
-webkit-text-size-adjust is no longer working after Chrome 27.
Try using transform
font-size:12px;
transform: scale(0.833);
It looks fine to me in Chrome v73. Perhaps your Chrome user profile has a minimum font-size set (do a search for "font" in Chrome's settings)?
Try Using em instead of px in a font-size because em is relative to the font size of its direct or nearest parent
I have a working example of a page loading animation when the user hits submit on the form here. Im trying to change the animation to something different but the newer animation is not happening inside the container and is loading even before the user hits submit on that form. The non working example can be found here
Can someone help me understand why this animation is not happening inside the container and why its being run when the page loads?
var myForm = document.getElementById('needs-validation');
myForm.addEventListener('submit', showLoader);
function showLoader(e) {
this.querySelector('.loader-container').style.display = 'block';
// the line below is just for the demo, it stops the form from submitting
// so that you can see it works. Don't use it
e.preventDefault();
}
#needs-validation {
/* .loader-container will be positionned relative to this */
position: relative;
}
.loader-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #9370DB;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #BA55D3;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
.loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FF00FF;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<form id="needs-validation">
<p>First name: <input type="text"></p>
<p>Last name: <input type="text"></p>
<p>Age: <input type="text"></p>
<button type="submit">Next</button>
<!-- insert your loader container here, inside the <form> element -->
<div class="loader-container">
<div class="loader"></div>
</div>
</form>
There was something messy in your .loader-container
Actually only thing I have done, I haave taken this class from working solution and added into the new one and it works.
In your new solution, you are missing the display:none at first place.
Here is an updated solution for you.
https://jsfiddle.net/v9dhqvrc/
All works properly, but I want to show a spinner loading instead of text. This is my code in Page.js.coffee:
jQuery ->
if $('.pagination').length
$(window).scroll ->
url = $('.pagination .next_page').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
$('.pagination').text("Fetching more...")
$.getScript(url)
$(window).scroll().
This line show the text:
$('.pagination').text("Fetching more...")
Thank you guys.
Perhaps css #keyframes suits just fine for your case, you can check possible implementation here https://projects.lukehaas.me/css-loaders/
for example you can take
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
}
.loader {
color: #ffffff;
font-size: 11px;
text-indent: -99999em;
margin: 55px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before,
.loader:after {
position: absolute;
content: '';
}
.loader:before {
width: 5.2em;
height: 10.2em;
background: #0dc5c1;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.loader:after {
width: 5.2em;
height: 10.2em;
background: #0dc5c1;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
#-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
and then in your coffescript just add and remove the class "loader" loading div, or add/remove div with such a class.
<div class="loader">Loading...</div>
I've implemented a featherlight lightbox to display alerts which is working; I am trying to include a loading spinner, but I have a couple of issues:
1) The spinner does not animate in IE, despite not using any incompatible methods
2) The circle appears as an ellipse, despite the height and width being equal
JSFiddle: http://jsfiddle.net/JNsu6/15/
This CSS is recommended on the official site:
https://github.com/noelboss/featherlight/wiki/Add-a-CSS-Only-Loader
#-webkit-keyframes featherlightLoader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes featherlightLoader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.featherlight-loading .featherlight-content {
-webkit-animation: featherlightLoader 1s infinite linear;
animation: featherlightLoader 1s infinite linear;
background: transparent;
border: 8px solid #8f8f8f;
border-left-color: #fff;
border-radius: 80px;
width: 80px;
height: 80px;
min-width: 0;
}
.featherlight-loading .featherlight-content > * {
display: none !important;
}
.featherlight-loading .featherlight-close,
.featherlight-loading .featherlight-inner {
display: none;
}
IE compatability is required, so alternatively if anyone could show me how to simply display a loading GIF using the featherlight loading class instead, that would be appreciated.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I've been searching the web for quite a while now and couldnt find any solutions so that why i'm asking here.
In the following images is my problem displayed.
http://www.digitusweb.nl/nieuw/wp-content/themes/waarbeek/images/what%20the%20code.jpg
how can i make this diamond shaped div. I've tried transform: rotate(-45deg); on a div that is 220px X 220px, and than let the content of that div have transform: rotate(45deg);
And another question.. How can i let the little border-arrow transist into the bigger blue rectangualr diamond shaped div?
The transform CSS attribute is part of CSS3 spec and still unsupported in some browsers. You will want a more cross-platform CSS class to cover browser specific attributes like the following (which was taken directly from css3please.com)
.box_rotate {
-webkit-transform: rotate(45deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(45deg); /* Firefox 3.5-15 */
-ms-transform: rotate(45deg); /* IE 9 */
-o-transform: rotate(45deg); /* Opera 10.50-12.00 */
transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera 12.10+ */
}
Alright I went a head with the rotate style but I had to make the content absolute to enable it's own transform style.
.di {
width: 100px;
height: 100px;
border: 2px solid lightBlue;
float: left;
margin-right: 50px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
position: relative;
}
.di:before {
content: "";
height: 0;
width: 0;
position: absolute;
right: 2px;
bottom: 2px;
border-right: 30px solid rgba(0, 0, 0, 0.2);
border-top: 30px solid transparent;
border-bottom: 0 solid transparent;
}
div.di span {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
line-height: 100px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
Here is the JSFIDDLE.
Phew that Second one was a good challenge,
View the fiddle to see the css and here is the jQuery I used,
$('.bigDi').on('click', function() {
$('.bigDi, .content').toggleClass('active');
});
Second question JSFIDDLE