How to show "loading" icon or message

HTML & CSS
1

How make make this if user click ok link or button them view loading image or css modal at center of the page until page not redirect on linked page?

3

I guess you are wanting something like this old jquery example (which could be converted to vanilla js if needed).

Of course its probably not as simple as that because if you are only wanting the element to spin while the page is processing something then it all needs to be tied into a processing script of some sort depending on the action you are taking.

Also if you are expecting this to work on the page that you are linking to then that will only work if you apply the routine on the linked page and set it to run while the page is loading. Otherwise as soon as you click a link the current page is lost anyway unless you are doing some processing and the new page would take over.

You probably need to clarify exactly what you intend to do with this and is probably a question for the JS forum. The css can apply the positioning etc but js will be needed for all the processing etc.

There are many tutorials on the web so do a google :slight_smile:

https://www.sitepoint.com/introduction-jquery-shorthand-ajax-methods/
https://www.sitepoint.com/css3-ajax-loading-icon/
http://jsfiddle.net/VpDUG/4952/

1 Like
4

Thank you for your reply. But it not run on https://htmledit.squarefree.com for preview even I exact copy past the content from preview page.

Could you tell me about what I write before jquery code.
For example: before JavaScript code (

5

I guess you’d need to paste all this in the top panel to see anything.

<style>
.myBtn {
  display: inline-block;
  cursor: pointer;
  color: #000;
  margin: 10px;
  text-decoration: none;
  background: #f00;
  border-radius: 6px;
  padding: 5px 15px;
  font-size: 2rem;
  color: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.myBtn:hover {
  background: #000;
  box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.3);
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 20%;
  bottom: 20%;
  left: 20%;
  right: 20%;
  margin: auto;
  padding: 20px;
  display: none;
  box-sizing: border-box;
  z-index: 100;
  overflow: hidden;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*Spinner borrowed from:
https://projects.lukehaas.me/css-loaders/
*/
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
    position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.6);
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
}

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

</style>

<div id="myModal" class="modal">
  <div class="modal-content" id="a1"> <span class="close">&#215;</span>
    <div class="loader">Loading...</div>
  </div>
</div>
<div> <a href="#a1" class="myBtn">Click Me</a> </div>

<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>

<script>
$(document).on("click", ".myBtn", function() {
  var myTargetModal = $(this).attr("href");
  $("#myModal").hide();
  $(".modal-content").hide();
  $("#myModal").fadeIn();
  $(myTargetModal).fadeIn();
  return false;
});

$("body").on("click", ".close", function() {
  $("#myModal").hide();
  $(".modal-content").hide();
});


</script>
6

Really it was little bit helpful.
Little bit becouse, The loading image not show when I changed the #a1. <a href="#a1" class="myBtn">Click Me</a> How to we add there link of site like, google.com, abcd.com instead of #a1.

7

Maybe try using a SVG background. It does not require javascript.

8

I am not understand yet what you saying also I visit your provided link where I found only show loading images on screen. No any Clixk link are there to I see the examples base on my questions.

If your answer is based on my question could you please write your code with full and send me an attachment.

9

Unfortunately I am busy at the moment with a client and your request for a “cut & paste” solution would take time without compensation :{

May I suggest Googling for a solution and prefixing the requirements with demo or example. Also amending the subsequent search parameters until the exact requirements are satisfied.

No doubt this problem has been previously encountered and a myriad of solutions are available. Each solution can be cut, pasted and tried on your project.

If you find a solution and have problems:

  1. create the problem online rather than just supplying source code
  2. explain in detail your requirements
  3. list the steps you have tried to solve the problem

Please help other member to help you find the solution :slight_smile:

10

I would expect a link to another page or site to load without any need for a “loading” icon. While it might take time on a very slow connection, that would be true of all pages, and the browser would normally indicate loading progress.

Can you explain more clearly the circumstances in which you want to use this?

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.