Fast help please - Loading screen.

Question

zzmrzz 5 Light Poster

9 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!!!

hosting login web-design

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

All 9 Replies

tapananand 13 Junior Poster

9 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

9 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 9 Years Ago by tapananand

tapananand 13 Junior Poster

9 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

9 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

9 Years Ago

That's it? =)

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

tapananand 13 Junior Poster

9 Years Ago

Yes.Did it work or not??

Edited 9 Years Ago by tapananand

Fast help please - Loading screen.

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers