I have a basic loading animation. It is supposed to run when a user clicks on an upload button.
Now it works perfectly in Chrome and UC Browser. But it isn't working in Safari and Opera Mini. I must support these browsers too.
First time developing such stuff, hence confused about where am I going wrong. Is it my CSS which isn't working is it that my jQuery isn't executing?
My HTML code:
{{ form.photo1 }}
<div class="loader">
<div class="spinner"></div>
aik min</div>
<input type="submit" class="UploadBtn btn bl cl bco mbs mts" style="border-color:#f57c00;" value="Upload">
My CSS code:
.loader {
font-size: 20px;
font-family: serif;
color: #00C853;
display: none;
}
.spinner {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #FFA000;
border-right: 5px solid #00C853;
border-bottom: 5px solid #FF9933;
border-left: 5px solid #00C853;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
display: none;
}
#-webkit-keyframes spin {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(0deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(360deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
}
#-o-keyframes spin {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(0deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(360deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(0deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(360deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
}
My jQuery code:
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function(event) {
$(".p").each(function(file) {
if ($(this).val()) {
$(".loader").show();
$(".spinner").show();
$("#overlay").show();
}
})
});
});
Please note that 'p' class is for {{ form.photo1 }} which is written in Django.
According to Can I use animation and transform is not supported in Opera mini and very old versions of Safari. Therefore your only chance is to fallback to JS animations in those browsers or better use an animated gif as a loading animation.
Related
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
I want the text to slide in and then when it gets centered wait for a few then continue and repeat the process. Anyone know how to do this?
Below is my code:
<marquee direction="left" id="artistslide">
<span id="currentartist"><i class="fa fa-spinner fa-spin"></i></span>
</marquee>
<marquee direction="right" id="currentsongslide">
<span id="currentsong"><i class="fa fa-spinner fa-spin"></i></span>
</marquee>
Then i have JS to do a timer but its not always right since its constantly timing itself:
var start = true;
setInterval(passStartMarquee, 3000 );
// adjust the delay
function passStartMarquee()
{
if (start) {
document.getElementById('currentsongslide').start();
document.getElementById('artistslide').start();
start = false;
} else {
document.getElementById('currentsongslide').stop();
document.getElementById('artistslide').stop();
start = true;
}
}
Here is a code found on this tutorial
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 10s linear infinite;
-webkit-animation: example1 10s linear infinite;
animation: example1 10s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% {
-moz-transform: translateX(100%);
}
40% {
-moz-transform: translateX(0%);
}
60% {
-moz-transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%);
}
}
#-webkit-keyframes example1 {
0% {
-webkit-transform: translateX(100%);
}
40% {
-webkit-transform: translateX(0%);
}
60% {
-webkit-transform: translateX(0%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%);
/* Firefox bug fix */
-webkit-transform: translateX(100%);
/* Firefox bug fix */
transform: translateX(100%);
}
40% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
60% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%);
/* Firefox bug fix */
-webkit-transform: translateX(-100%);
/* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="example1">
<h3>I'll pause so you can read me.</h3>
</div>
<div class="example1">
<h3>I'll pause so you can read me.</h3>
</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.
I have a serious problem with Internet explorer.
I really need to use the scale function in my CSS, but the quality of the video is totally deteriorated.
It works fine with Chrome (and Firefox i think) but not with IE.
Are there any tips to make this better ?
I saw some css tips to change the quality of images but this doesn't work with videos.
Here is a code test (put the cursor over the video to scale it): http://jsfiddle.net/MxxAv/145/
HTML:
<video autoplay id="video" src="http://www.html5videoplayer.net/videos/toystory.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video>
CSS
#video {
width: 200px;
height: 113px;
}
#video:hover {
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: scale(2.3);
-webkit-transform: scale(2.3);
}
Thanks for your help !
Adding an original scale may help. Also, for cross-browser support, it helps to use all of the vendor prefixes. Notice, I moved the commands with no prefix to the bottom. Browsers apply the last usable command, so if a browser needs the prefix, you can simply move the prefixed command to the bottom. I added the vendor prefixes and scale to your code, and a duration just for kicks :)
#video {
width: 284px;
height: 160px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
#video:hover {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(2.8);
-moz-transform: scale(2.8);
-ms-transform: scale(2.8);
-o-transform: scale(2.8);
transform: scale(2.8);
}
I want a Flash website for loading my html5/css3 webpage.
The page should only appear when it is completely rendered. Before it is displayed, a loading bar must appear.
How should I do that? Do I need something else apart from HTML5 and CSS3?
Please provide me with the tutorial.
Put a div at the beginning of your page (well this is a spinner and not a loading bar... but...)
<div id="work-in-progress">
<div class="work-spinner"></div>
</div>
then using JQuery bind to the load event... which gets fired when the page is loaded
$(window).bind("load", function () {
$('#work-in-progress').fadeOut(100);
});
and add some css to the div to
#work-in-progress {
position: fixed;
width: 100%;
height: 100%;
font-size: 150px;
text-align: center;
vertical-align: middle;
color: #000000;
z-index: 200000;
background-color: #FFFFFF;
}
.work-spinner {
background-color: rgba(0,0,0,0);
border: 9px solid rgba(27,61,226,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-radius: 120px;
-webkit-box-shadow: 0 0 35px #1B3DE2;
box-shadow: 0 0 35px #1B3DE2;
width: 100px;
height: 100px;
margin: 0 auto;
-moz-animation: spin .5s infinite linear;
-webkit-animation: spin .5s infinite linear;
-o-animation: spin .5s infinite linear;
animation: spin .5s infinite linear;
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-o-keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
pimboden's answer is great, but it needs the actual keyframes to animate.
Here's the missing CSS:
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-o-keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
If you are using huge number of images and just want your users to wait until they get loaded instead of showing slowly revealing images you can use
https://github.com/alexanderdickson/waitForImages
Its pretty much all you may want because rest of the page is just text [if its normal size web page]. It will get loaded in no time.
That's a big question but I can push you in a direction:
$(window).load(function(){
//initialize after images are loaded
});
Sometimes you want to manipulate/render pictures or webpages. For example you want to verticaly and horizontaly align a picture and you need to get the width and height of the picture in order to do that. With $(document).ready() you won’t be able to do that if the visitor doesn’t have the image already loaded, in which case you need to initialize the jquery alignment function when the image finishes loading.
Here may be a step in the right direction:
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
This only shows the website when everything is loaded!