CODEWITHSUNDEEP
javascripthtmlcss
Joseph
Joseph

Reputation: 73

Loader CSS animation

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!

Upvotes: 0

Views: 164

Answers (2)

cam
cam

Reputation: 3616

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.

Upvotes: 2

Elias Schablowski
Elias Schablowski

Reputation: 2812

There are some things you can do namely:

  1. 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.
  2. Create a new style element with a unique id (somewhat overly complex for something of this scale)
  3. 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);

Upvotes: 2

Related Questions