Loader CSS animation - javascript

This is an example of a loader animation copied from the w3schools website:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2>How To Create A Loader</h2>
<div class="loader"></div>
</body>
</html>
I have a similar one on my page with function to hide the loader after seconds of the main page refresh:
setTimeout(function() {
$('#loadingAnimation').addClass('hidden');
}, 1500);
Now my question is:
Is there a way to add the animation elements using JavaScript? I mean, when I inspect the page I can change the CSS of the loader which makes it visible, so how can I add the elements on the page using JavaScript and then remove it to make it unchangeable?
#loadingAnimation{
position: fixed;
max-width: 100%;
max-height: 100%;
top:0;
left:0;
right:0;
bottom:0;
background-color: #ffffff;
opacity: 1;
transition: 0.5s;
visibility: visible;
z-index: 10;
}
#loadingAnimation.hidden{
opacity: 0;
visibility: hidden;
}
I'm new to programming :) I need your help and I hope my question is clear!

There are some things you can do namely:
Add a class into your style that does the animation (Recommended since it requires the least work) and add elements with that class / add the class to elements.
Create a new style element with a unique id (somewhat overly complex for something of this scale)
requestAnimationFrame - Very hard and easy to go wrong - Basically just for reference
Implementation for 1:
CSS:
.loadingAnimation { /* . notates a class whereas # notates an id */
position: fixed;
max-width: 100%;
max-height: 100%;
top:0;
left:0;
right:0;
bottom:0;
background-color: #ffffff;
opacity: 1;
transition: 0.5s;
visibility: visible;
z-index: 10;
}
JS:
const loader = document.createElement("div");// Create a new div element
loader.className = "loadingAnimation"; // Add the loadingAnimation class to it
document.getElementById("root").append(loader); // Add it to an element with id root
setTimeout(function() {
loader.remove(); // Remove the loader
}, 1500);

Instead of applying the hidden class to the loader element you can just simply remove it instead!
setTimeout(function() {
$('#loadingAnimation').remove();
}, 1500);
This will remove it from the DOM and stop people playing with the styling in the dev tools.
I will add though that there's really not a lot you can do to stop people fiddling with websites in their own browsers and it's not that big of an issue.

Related

SVG Preloader with CSS animation that randomizes on each page load

So i made a svg logo preloader, made some css animations for it also. But my main problem is how do i make the preloader load different animation on refresh/new page loading using javascript. Like for example on one page loading the logo should use the bounce animation and upon a page refreh or on another tab opening the preloader to use the rotate animation i made, etc.
var strings = [
'animation1.',
'animation2.',
'animation3.'
];
var rand = strings[Math.floor(Math.random() * strings.length)];
document.getElementById('loading-animation').innerHTML = rand;
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background: #ddd;
padding-top: 200px;
}
.svg {
display: block;
width: 80px;
height: 80px;
background: #aaa;
margin: 10px auto;
}
.animation1 {
just an example
}
.animation2 {
just an example
}
.animation2 {
just an example
}
<div id="container" class='loading' >
<div id='loading-animation' class='loading-animation'>Processing</div>
<svg>just an example svg in inserted in the html, no external src link to it</svg>
</div>
I'm pretty sure that .innerHTML shouldn't be there since the javascript file will be external linked in the head section. And i know i haven't linked all of the codes used just because it's to much code to paste here so i made a mini example, hope i can make myself understood. Thanks.
You can use JavaScript to randomly assign a CSS class to the element you want to animate. Here is an example.
var animationClasses = [
'animation1',
'animation2',
'animation3'
];
var choosenAnimation = animationClasses[~~(Math.random() * animationClasses.length)];
document.getElementById('elementToAnimate').classList.add(choosenAnimation);
#keyframes grow {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fly-down {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
.animation1 {
width: fit-content;
animation: grow 1s;
}
.animation2 {
animation: fade 1s;
}
.animation3 {
animation: fly-down 1s;
}
<div id="elementToAnimate">This will get a random animation</div>
A random class in the array animationClasses is assigned to elementToAnimate. Each class contains CSS for a different animation, allowing for a random animation each time.

Fade the same image in and out in one line of CSS automatically

I have an image that I want to fade in and out automatically. I've read about transitions and animations and would like to use one or two styles (not style declarations). It's OK to start the animation via JavaScript.
In this example on MDN you can see that the items are animated on page load by switching classes. I would like it to be simpler than that.
Here is what I have so far and it seems like it should work but it's not.
function updateTransition(id) {
var myElement = document.getElementById(id);
var opacity = myElement.style.opacity;
if (opacity==null || opacity=="") opacity = 1;
myElement.style.opacity = opacity==0 && opacity!="" ? 1 : 0;
}
var id = window.setInterval(updateTransition, 5000, "myElement");
updateTransition("myElement");
#myElement {
background-color:#f3f3f3;
width:100px;
height:100px;
top:40px;
left:40px;
font-family: sans-serif;
position: relative;
animation: opacity 3s linear 1s infinite alternate;
}
<div id="myElement"></div>
Also, here is an example of an animation on infinite loop using a slide animation (3 example in the list). I'd like the same but with opacity.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
The linked question is not the same as this. As I stated, "single line styles (not style declarations)".
What you need is to define your animation using keyframes. If you are trying to apply multiple animations, you can provide a list of parameters to the animation CSS properites. Here's an example that applies a slide in and fade animation.
.fade {
width:100px;
height:100px;
background-color:red;
position:relative;
animation-name:fadeinout, slidein;
animation-duration:2s, 1s;
animation-iteration-count:infinite, 1;
animation-direction:alternate, normal;
}
#keyframes fadeinout {
0% {
opacity:0
}
100% {
opacity:100
}
}
#keyframes slidein {
from {
left:-100px;
}
to {
left:0px;
}
}
<div class='fade'>
</div>
You can use animation-iteration-count :
#myElement {
background-color: #f3f3f3;
width: 100px;
height: 100px;
top: 40px;
left: 40px;
font-family: sans-serif;
position: relative;
animation: slidein 2s linear alternate;
animation-iteration-count: infinite;
}
#keyframes slidein {
0% {
opacity: 0;
left: -100px;
}
50% {
opacity: 1;
left: 40px;
}
100% {
opacity: 0;
left: -100px;
}
}
<div id="myElement"></div>

How to create a loader in Javascript waiting for a function to end?

I have a function in Javascript (in the browser, not node.js) that it takes a lot of time to commit. I want that while the function is being processed, the browser will present a loader, so the user can understand that he/she has to wait.
create a loader first :
<div class="loader" id="loader">
</div>
Then add the loader class in your CSS(css file of your loader class) :
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.hide-loader{
display:none;
}
Add this js code to your JS file after your function executes completely,just hide the loader.
$('#loader').addClass("hide-loader");
I changed it full vanilla js without creating div and style sheet.
https://github.com/AmagiTech/JSLoader
<p>asd sadasdasdasdasda</p>
<script src="https://cdn.jsdelivr.net/gh/AmagiTech/JSLoader/amagiloader.js"></script>
<script>
AmagiLoader.show();
setTimeout(() => {
AmagiLoader.hide();
}, 3000);
</script>

Recreating a text animation (source within)

I would like to recreate the text animation seen in this screen video I did of this website theme: http://themeforest.net/item/js-responsive-theme/full_screen_preview/7630276
Here is the video to show you the animation:
https://drive.google.com/file/d/0B3HFm_t_vjVpVUNiWVRVdW14aWs/edit?usp=sharing
I am unsure of where to begin and cannot find anything like it through my search so far, I am open to anything to create this such as jQuery. Thank you for any help!
I'd do this with two absolute positioned texts, one gray (or semi transparent) second one, on top set to overflow:hidden. Then I'd just animate the width of the second container.
How do You like the idea? :)
edit:
little tweaking, but idea the same - fiddle for You: http://jsfiddle.net/Lr4PQ/
quite important CSS rule:
white-space: nowrap;
to prevent breaking lines when width of text node is smaller than text's.
edit 2:
Of course, idea behind lets You to achieve the result using pure CSS, jQuery's role is just animating width.
HTML:
<div class="container">
<div class="text upper">You`re the boss</div>
<div class="text ">You`re the boss</div>
</div>
CSS:
body {
background:#000;
}
.container {
position:absolute;
left:30%;
top:20%;
width:auto;
/*position container as You wish*/
}
.text {
text-transform:uppercase;
font-family:sans-serif;
color:#FFF;
opacity:.2;
white-space: nowrap;
font-size:30px;
}
.text.upper {
position:absolute;
opacity:1;
overflow:hidden;
width:0%;
}
jQuery:
$('.text.upper').animate({width:'100%'},3000).animate({width:'0%'},3000);
The animation is achieved in pure CSS3:
jsBin demo
HTML:
<div class="modal">
<h1 data-content="YOUR BEAUTIFUL NAME">YOUR BEAUTIFUL NAME</h1>
</div>
CSS:
.modal h1 {
color: #626161;
font-size: 30px;
left: 50%;
margin-left: -125px;
margin-top: -15px;
position: absolute;
text-align: center;
top: 50%;
}
.modal h1:before {
animation: 5s ease 0s normal none 1 loading;
-o-animation: 5s ease 0s normal none 1 loading;
-ms-animation: 5s ease 0s normal none 1 loading;
-moz-animation: 5s ease 0s normal none 1 loading;
-webkit-animation: 5s ease 0s normal none 1 loading;
color: #E2E2E2;
content: attr(data-content);
max-width: 100%;
overflow: hidden;
position: absolute;
white-space:nowrap;
}
#keyframes loading {
0% { max-width: 0%; }
}
#-o-keyframes loading {
0% { max-width: 0%; }
}
#-ms-keyframes loading {
0% { max-width: 0%; }
}
#-moz-keyframes loading {
0% { max-width: 0%; }
}
#-webkit-keyframes loading {
0% { max-width: 0%; }
}
One of the reason they used a single h1 instead of overlaying two h1 elements and animating the second's one width is simply cause for a better SEO a page should contain only one h1 element. Also using content: attr(data-content); is quite fun so...

Moving in an Arc with Webkit Transitions

Right now I'm trying to put together something really simple, learn from it, and incorporate it in a bigger project.
I have a simple box I'm trying to move from one position to another using css webkit animations and the translate function (for iOS hardware acceloration purposes). I need it to move in an arc and then stay at that point at the top of the arc.
Now, I'm pretty new to CSS transitions. In the past I've used jQuery animations but that seems to run really slowly on mobile devices. I know there's probably some best practice ideas I can incorporate here for setting and manging these animations, but I'm kinda figuring them out as I go.
Right now the box moves all the way up and then appears back in the starting position. How do I get it to stay there?
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/M/march_madness/tmp/
<style type="text/css">
#ball {
display:block;
position: absolute;
width: 50px;
height: 50px;
overflow: hidden;
top: 500px;
left: 100px;
background-color: red;
} #action {
display: block;
font-weight:bold;
}
.animation {
-webkit-animation-name: throwBall;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes throwBall {
from { -webkit-transform: translate( 0px, 0px ); }
25% { -webkit-transform: translate( 75px, -25px ) }
50% { -webkit-transform: translate( 150px, -75px ) }
75% { -webkit-transform: translate( 225px, -150px ) }
to { -webkit-transform: translate( 300px, -300px ); }
}
</style>
<script type="text/javascript">
if ( typeof(jQuery) == 'undefined' ) document.write('<scri'+ 'pt type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></scri'+'pt>');
</script>
<a id='action'>Animate Me</a>
<div id='ball'></div>
<script type="text/javascript">
$(document).ready(function(){
$('#action').bind('click',function(){
$('#ball').addClass('animation').bind('webkitAnimationEnd',function(){
});
});
});
</script>
Just add the end state of the animation to your class as properties set by animation are removed when animation ends. Adding -webkit-transform: translate(300px, -300px); to your animation class fixes your problem.
.animation {
-webkit-animation-name: throwBall;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform: translate(300px, -300px);
}

Categories