Fast help please - Loading screen.

Question

zzmrzz 5 Light Poster

10 Years Ago

Hello fellow coders.
I am trying to make a Minecraft Hosting Company (Danish Company)
And i need a "Loading screen" for my Login popup.
I found this:
HTML:

<div id="outer-barG">
<div id="front-barG" class="bar-animationG">
<div id="barG_1" class="bar-lineG">
</div>
<div id="barG_2" class="bar-lineG">
</div>
<div id="barG_3" class="bar-lineG">
</div>
</div>
</div>

And this CSS:

#outer-barG{
height:12px;
width:40px;
border:1px solid #2D44D6;
overflow:hidden;
background-color:#6E8BBD}

.bar-lineG{
background-color:#2D44D6;
float:left;
width:6px;
height:39px;
margin-right:7px;
margin-top:-9px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

.bar-animationG{
margin-left:53px;
width:53px;
-moz-animation-name:bar-animationG;
-moz-animation-duration:1.65s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-animation-name:bar-animationG;
-webkit-animation-duration:1.65s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-animation-name:bar-animationG;
-ms-animation-duration:1.65s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-animation-name:bar-animationG;
-o-animation-duration:1.65s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
animation-name:bar-animationG;
animation-duration:1.65s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#front-barG{
}

@-moz-keyframes bar-animationG{
0%{
margin-left:-40px;
margin-top:-6px}

100%{
margin-left:49px;
margin-top:-6px}

}

@-webkit-keyframes bar-animationG{
0%{
margin-left:-40px;
margin-top:-6px}

100%{
margin-left:49px;
margin-top:-6px}

}

@-ms-keyframes bar-animationG{
0%{
margin-left:-40px;
margin-top:-6px}

100%{
margin-left:49px;
margin-top:-6px}

}

@-o-keyframes bar-animationG{
0%{
margin-left:-40px;
margin-top:-6px}

100%{
margin-left:49px;
margin-top:-6px}

}

@keyframes bar-animationG{
0%{
margin-left:-40px;
margin-top:-6px}

100%{
margin-left:49px;
margin-top:-6px}

}

But it does it the hole time, and not on load?
How to make the loading kind of screen pop up, when you press Login? (On load)

Screenshot: http://gyazo.com/55b0c840f4cb812474f8943d9145a9cd

By the way: Thanks alot!!! =)

This is just a very very good website = LOVE IT!!!

web-design web-server

2 Contributors
9 Replies
199 Views
22 Hours Discussion Span
Latest Post 10 Years Ago Latest Post by tapananand

tapananand 13 Junior Poster

10 Years Ago

First of all get a loading anim of your choice from here: http://www.ajaxload.info/
You don't need that large a css to animate and all just use a gif instead.
But to help, I need to know how this login popup appears and when is the loading screen required to appear. Be a bit more explanatory.

tapananand 13 Junior Poster

10 Years Ago

Ok. So i assume you have downloaded an image from the link I gave.
Have an image tag with that image as src and hide it. Give it an id.
For Example:
<img src="img.gif" id="loading"/>

in css:

#id
{
    display:none;
}

Now, put an onclick event in the login button that just shows this image.

myOnClickHandler()
{
    document.getElementById('loading').style.display = 'block';
}

That's it.
Tell me if this does not work.

Edited 10 Years Ago by tapananand

tapananand 13 Junior Poster

10 Years Ago

First of all id of image is to be loading you have loader.
Remove these lines from your css: line 121 to 223.
and Remove these lines from your html: line 42 to 51.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

zzmrzz 5 Light Poster · Answer 1 · 2014-06-12T15:15:48+00:00

Here it is http://gyazo.com/85c44530c4ca5490ff11c4c4c1411f41
But in the video ^ there is a "css loading box", but i don't want it to be showed now. I want it to be showed when the page loads. (when you tapped the Login button. =)

zzmrzz 5 Light Poster · Answer 2 · 2014-06-12T20:44:16+00:00

zzmrzz 5 Light Poster

10 Years Ago

I don't know how to make this work... =)

tapananand 13 Junior Poster · Answer 3 · 2014-06-13T02:50:31+00:00

Paste your form html here. Then i'll see what I can do to explain more.

zzmrzz 5 Light Poster · Answer 4 · 2014-06-13T12:23:06+00:00

Here is the full HTML:

<html>
 <head>
 <link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Cerox-Servers  -Vi skruer ikke ned for styrken, dog prisen!</title>

   <script language="JavaScript" type="text/javascript">
  function login(showhide){
    if(showhide == "show"){
        document.getElementById('popupbox').style.visibility="visible";
    }else if(showhide == "hide"){
        document.getElementById('popupbox').style.visibility="hidden"; 
    }
  }
  </script>

<script language="JavaScript" type="text/javascript">
    myOnClickHandler()
{
    document.getElementById('loading').style.display = 'block';
}

</script>
 </head>


<body bgcolor="#e8e2d0" style="margin:0;">

<div id="popupbox">
    <center><a class="closebutton" href="javascript:login('hide');">Luk</a></center>
    <center><h4>AdminCP</h4></center>
    <form name="login" action="login.php" method="post">
    <center>Brugernavn:</center>
    <center><input type="text" name="username" placeholder="Brugernavn" size="14" /></center>
    <center>Password:</center>
    <center><input name="password" type="password" placeholder="Password" size="14" /></center>
    <center><input onclick="javascript:myOnClickHandler('show')" type="submit" name="submit" value="login" /></center>
    </form>
    <br />



<center><div id="outer-barG">
<div id="front-barG" class="bar-animationG">
<div id="barG_1" class="bar-lineG">
</div>
<div id="barG_2" class="bar-lineG">
</div>
<div id="barG_3" class="bar-lineG">
</div>
</div>
</div></center>


<img src="ajax-loader.gif" id="loader"/>
</div>    

    <div id="top">

        <div id="topright"><center><a href="javascript:login('show');">Login</a></center>

        </div>


           <br><a href="index.php"><img style="width:40%; height:60%;" src="images/logo2.png"></a>

           <ul>
              <li><a style="margin-left:70%;" class="top" href="index.php">FORSIDE</a></li>
           </ul>

    </div>

    <div id="show"></div>


    <div id="wrap">


        <br>
        <br>
        <p class="borders" style="text-align:center;">Under opbygning! =)</p>

    </div>


</body>
</html>

And here is all the CSS:

#top{
  margin: auto;
  width: 100%;
  height: 20%;
  border: 1px #63686B;
  border-bottom: 2px solid blue;
  background-color: #383636;
}

#topright{
  margin-left: 75%;
  margin-top: 0%;
  border: 1px solid black;
  width: 20%;
  height: 5%;
  position: absolute;
}

#top li {
  display: inline;
  color: white;
}

#show{
  margin: auto;
  width: 100%;
  height: 6%; 
  border: 1px #63686B;
  background-color: #63686B;
}

#show li {
  display: inline;
  color: white;
}

#wrap{
  margin: auto;
  margin-top: 5%;
  width: 100%;
  height: 80%;
  background-color: ;
}

.borders{
 border: 1px dashed #000;
 text-decoration: white;
 height: 50%;
 width: 30%;
 margin-left: auto;
 margin-right: auto;
}

.borders:hover{
 border: 1px dashed #000;
 text-decoration: solid blue;
 height: 50%;
 width: 30%;
}

.top{
  width: 7%;
  height: 5%;
  text-decoration: none;
  color: white;
}

.top:hover{
  width: 7%;
  height: 5%; 
  border-bottom: 1px solid blue;
  text-decoration: none;
}



  #popupbox{
  margin: 0; 
  margin-left: 40%; 
  margin-right: 40%;
  margin-top: 50px; 
  padding-top: 10px; 
  width: 20%; 
  height: 300px; 
  position: absolute; 
  background: #FBFBF0; 
  border: solid #000000 2px; 
  z-index: 9; 
  font-family: arial; 
  visibility: hidden;
  border-radius: 20px; 
  }

  .closebutton a {
    text-decoration: none !important;
  }

  .closebutton{
  margin: 0;
  width: 20%;
  height: 15%;
  background-color: grey;
  border-radius: 3%;
  border: 1px solid black;
  color: solid black;
  text-decoration: solid black;
  }

  .closebutton:hover{
  margin: 0;
  width: 20%;
  height: 15%;
  background-color: grey;
  border-radius: 3%;
  border: 1px solid black;
  color: solid red;
  text-decoration: solid red;
  }


#outer-barG{
height:12px;
width:40px;
border:1px solid #2D44D6;
overflow:hidden;
background-color:#6E8BBD}

.bar-lineG{
background-color:#2D44D6;
float:left;
width:6px;
height:39px;
margin-right:7px;
margin-top:-9px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

.bar-animationG{
margin-left:53px;
width:53px;
-moz-animation-name:bar-animationG;
-moz-animation-duration:1.65s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-animation-name:bar-animationG;
-webkit-animation-duration:1.65s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-animation-name:bar-animationG;
-ms-animation-duration:1.65s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-animation-name:bar-animationG;
-o-animation-duration:1.65s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
animation-name:bar-animationG;
animation-duration:1.65s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#front-barG{
}

@-moz-keyframes bar-animationG{
0%{
margin-left:-40px;
margin-top:-6px}

100%{
margin-left:49px;
margin-top:-6px}

}

@-webkit-keyframes bar-animationG{
0%{
margin-left:-40px;
margin-top:-6px}

100%{
margin-left:49px;
margin-top:-6px}

}

@-ms-keyframes bar-animationG{
0%{
margin-left:-40px;
margin-top:-6px}

100%{
margin-left:49px;
margin-top:-6px}

}

@-o-keyframes bar-animationG{
0%{
margin-left:-40px;
margin-top:-6px}

100%{
margin-left:49px;
margin-top:-6px}

}

@keyframes bar-animationG{
0%{
margin-left:-40px;
margin-top:-6px}

100%{
margin-left:49px;
margin-top:-6px}

}


#loader
{
    display:none;
}

zzmrzz 5 Light Poster · Answer 5 · 2014-06-13T13:03:15+00:00

zzmrzz 5 Light Poster

10 Years Ago

That's it? =)

tapananand 13 Junior Poster · Answer 6 · 2014-06-13T13:23:58+00:00

tapananand 13 Junior Poster

10 Years Ago

Yes.Did it work or not??

Edited 10 Years Ago by tapananand