Develop Reference

Hide loading icon after 3 sec, when we click on a link <a

I have a loading icon in CSS, when someone clicks on a link the problem is in the mobile version I have a slide menu that open with one tag, or link, and the CSS icon is showing and never disappear.
I need to hide the CSS icon after 3 sec, this is my code.
$('a').click(function(){
$('.loadingDiv').fadeIn('slow', function(){
$('.loadingDiv').delay(3000).fadeOut();
});
$('<div class="loadingDiv mobileShow"></div>').prependTo(document.body);
});
.loadingDiv {
position: fixed;
left: 45%;
top: 30%;
width: 100%;
height: 100%;
z-index: 9999;
opacity: .5;
width: 40px;
height: 40px;
background-color: #333;
width: 40px;
height: 40px;
background-color: #333;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
But is not working, any help will be great, because the

Don't forget about setTimeout.
You can simply:
setTimeout(function () {
... do the fading out here ...
}, 3000);
I always prefer vanila-js solution over jQuery one. ;)
Cheers!

Rails: Infinite Scroll, load spinner instead of text

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>

Closeable bottom bar with slide animation

I want a bar for the bottom of my webpage that has a nice animation, similar to this one: http://css-tricks.com/pop-from-top-notification/ but stays on screen until it is closed. This is all the css I have so far:
.about {
background: black;
text-align: left;
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
color: #0f0;
font-size: 21px;
font-family: Timeburner;
padding: 10px;
}
I don't care if it takes jquery or somthing else, as long as it works.

you need to add this css:
#-webkit-keyframes slideUp {
0% { -webkit-transform: translateY(50px); }
100% { -webkit-transform: translateY(0px); }
}
#-moz-keyframes slideUp {
0% { -moz-transform: translateY(50px); }
100% { -moz-transform: translateY(0px); }
}
#note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideUp 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideUp 2.5s 1.0s 1 ease forwards;
}
here is the Fiddle Demo
here is your example with the Css animation: Fiddle (you will need to add the JS for the close button)
here is and example with slide down on close: Fiddle it uses Jquery but can also be done using pure JS:
close = document.getElementById("close");
close.addEventListener('click', function() {
$("#note").slideUp();
}, false);

How to show progress bar until the page completely loads in HTML5/CSS3?

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!

Possible to reverse a css animation on class removal?

Essentially what I'm trying to do is give an element a CSS animation when it gains a class, then reverse that animation when I remove the class without playing the animation when the DOM renders.
Fiddle here: http://jsfiddle.net/bmh5g/
As you can see in the fiddle, when you hover the "Hover Me" button, #item flips down. When you mouseoff the hover button, #item just disappears. I want #item to flip back up (ideally using the same animation but in reverse). Is this possible?
$('#trigger').on({
mouseenter: function() {
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
})
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

I would have the #item start out hidden with the reverse animation by default. Then add the class to give it the animation and show the #item. http://jsfiddle.net/bmh5g/12/
$('#trigger').on({
mouseenter: function() {
$('#item').show();
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
});
#trigger {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 0 10px 0;
background: teal;
color: white;
font-family: sans-serif;
}
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
display: none;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
animation: flipperUp 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipperUp 0.7s;
-webkit-animation-fill-mode: forwards;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
#keyframes flipperUp {
0% {
transform: perspective(350px) rotateX(0deg);
}
33% {
transform: perspective(350px) rotateX(10deg);
}
66% {
transform: perspective(350px) rotateX(0deg);
}
100% {
transform: perspective(350px) rotateX(-90deg);
}
}
#-webkit-keyframes flipperUp {
0% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

Another approach, rather than using display: none, is to suppress the reverse animation with a class on page load, and then remove that class with the same event that applies the normal animation (eg: flipper). Like so (http://jsfiddle.net/astrotim/d7omcbrz/1/):
CSS - in addition to the flipperUp keyframe posted by Blake above
#item.no-animation
{
animation: none;
}
jQuery
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('no-animation');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
}
})

In addition to the answers here, please cache your $(selector)
So you pretty much do this var elements = $(selector); to cache.
Why?! Because if you use the code in the answers on this page as is you will ask the DOM for that same element collection ($('#item')) each time. DOM reading is an expensive operation.
For example, the accepted answer would look something like so:
var item = $('#item');
$('#trigger').on({
mouseenter: function(){
item.show();
item.addClass('flipped');
},
mouseleave: function(){
item.removeClass('flipped');
}
});
Since I've written all this text, might as well answer your question using CSS transitions
I know you asked for a CSS animations example, but for the animation you wanted to do (a card flipping open), it can be easily achieved using CSS transitions:
#item {
width: 70px;
height: 70px;
background-color: black;
line-height: 1;
color: white;
}
#item+div {
width: 70px;
height: 100px;
background-color: blue;
transform: perspective(250px) rotateX(-90deg);
transform-origin: 50% 0%;
transition: transform .25s ease-in-out
}
#item:hover+div {
transform: perspective(250px) rotateX(0);
}
<div id="item"></div>
<div></div>

Its animating down using css so to get it to animate up you need to create a class, say .item-up that does the transformation in the opposite so then you would remove the previous class and add the item-up class and that should animate it up.
I would write you a js fiddle for it but I dont know the syntax well enough.
Basically when you will need:
#keyframes flipper
#keyframes flipper-up //This does the opposite of flipper
and
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('flipped-up');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
$('#item').addClass('flipped-up');
}
})
jsfiddle.net/bmh5g/3 courtesy of Jake

CSS solution from MDN and almost supported by all browser
.animation(animationName 10s ease-in-out infinite alternate both running;)

You can make use of the attribute animation-direction to run the same animation in reverse.
If you couple this with one of the many methods described here for restarting an animation- we can start the animation forwards on mouseenter, then on mouseleave we can restart it and play it in reverse.
I don't know how to use jQuery very well, so I chose one of the non-jQuery methods mentioned in the article.
const element_button = document.getElementById('trigger');
const element_item = document.getElementById('item');
element_button.addEventListener("mouseenter", () => {
if (element_item.classList.contains('animate-backwards')) {
element_item.classList.remove('animate-backwards');
void element_item.offsetWidth;
}
element_item.classList.add('animate-forwards');
});
element_button.addEventListener("mouseleave", () => {
element_item.classList.remove('animate-forwards');
void element_item.offsetWidth;
element_item.classList.add('animate-backwards');
});
and
#item.animate-forwards {
animation: flipper 0.7s normal;
-webkit-animation: flipper 0.7s normal;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#item.animate-backwards {
animation: flipper 0.7s reverse;
-webkit-animation: flipper 0.7s reverse;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
Here is a jsFiddle for the above code.

Worked fo me:
1 animation in reverse for the Element (from 100% to 0%)
1 separate animation forwards for the new class (from 0% to 100%)
And toggling that class would work
[1]: https://jsfiddle.net/q7bc4s0f/17/
Upd:
That way animation will play backwards on page load. To solve this you have to ADD new bacwards animation class on event ONCE and then toggle forwards animation class on that event.