How to make a gif of loading in Javascript?

Asked

Viewed 3,096 times

1

Guys I have a very stupid problem in my HTML project, where I wanted to show a gif of a page being loaded, but it is a long time beyond what I report and with this, my real page is not to be seen. Could someone help me with this?

HTML:

</head>
  <body onload="myFunction()" style="margin:0;">
    <div class="loader"></div>
    <div style="display:none;" class="myDiv" class="animate-bottom">
<header>

CSS:

/* Center the loader */
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

.myDiv {
  display: none;
  text-align: center;
}

JS:

var myVar;

function myFunction() {
    myVar = setTimeout(showPage, 30);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}
javascript html css

  • Dude since you are already using @keyframes pq vc does not control the weather there? This your Downloader is aesthetic or he is dynamic and is functional for real?

  • Wow, two properties class in the same Html tag??? Can this Arnaldo??

2 answers

3


You are trying to select elements that do not possess the id indicated, but yes classes:

       ↓
<div class="loader"></div>
                             ↓
<div style="display:none;" class="myDiv" class="animate-bottom">

                     ↓
document.getElementById("loader").style.display = "none";
                     ↓
document.getElementById("myDiv").style.display = "block";

There is also an error that is the double statement of class. This will make that the second is ignored. Change to: class="myDiv animate-bottom", by placing the two classes in the same declaration.

But since they are unique elements, change the class for id in HTML:

<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">

And in CSS also change the . for #:

↓
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

↓    
#myDiv {
  display: none;
  text-align: center;
}

Behold:

var myVar;

function myFunction() {
    myVar = setTimeout(showPage, 2000); // aumentei o tempo para ilustração
}

function showPage() {
   document.getElementById("loader").style.display = "none";
   document.getElementById("myDiv").style.display = "block";
}
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">

Or you can simply select the elements by the class with getElementsByClassName:

function showPage() {
   document.getElementsByClassName("loader")[0].style.display = "none";
   document.getElementsByClassName("myDiv")[0].style.display = "block";
}

Where the index [0] means that these elements are the first of the classes present on the page.

But I find it much more recommended in this case to use ids as I indicated at the beginning of the reply.

  • Thank you very much, but the problem is different now. 1 - my gif that there was something spinning came out, how can we get it back? 2 - my organization is all shit, before it was all centered in the middle of the screen and now it’s all pulled to the left, how can I go back? PS: the only thing I’ve changed is where you informed me.

  • If you have done as I said there is no way to go wrong. Run the code and you will see that the animation is there. Only it disappears fast because this "30" in this line myVar = setTimeout(showPage, 30); is fast mt.

  • Change the class that I told id in HTML and CSS.

  • I found where I was wrong, now the GIF is showing up, thank you. But still my centralized formatting is justified to the left, how could it change and come back?

  • has two width: 150px;&#xA; height: 150px; no.

  • I’ve already solved it, thank you very much for your great help.

Show 1 more comment

0

Try using the . Javascript blockui , See the example

if (id > 0) {
    //Bloquei a tela e mostra a mensagem
       $.blockUI({ message: " Carregando informações da base de dados, isso pode demorar alguns segundos... " });

        ChamaCarregaDados(); // depois que carregar todos os dados

     $.unblockUI(); //Desbloquear UI

    }


    -> não esqueça de colocar a biblioteca
    <script src="jquery.blockUI.1.33.js"></script>

lower in
https://github.com/lian/javascript-bundle/tree/master/resources/jquery/plugins/blockui/1.33

Example of how it looks inserir a descrição da imagem aqui

  • Could [Dit] the answer and link that lib you’re using?

  • 1

    I put it where you get the library

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.