Question 17676 in Laravel Question posted in
The official Laravel Documentation can be found here.

How to show a page loader in laravel after submitting my form

How to display a loader after form submit in laravel, i am currently using css for this option…but its not working as expected.

 <button type="submit" id="submit" class="w-full px-3 py-3 font-medium text-white bg-green-400 rounded-lg">Request now</button>
Tags:

2

Answers


  1. 0

    Don’t know if this is what you need. But I also hope to help you:

    <form action="you_action" method="post">
    <button type="submit" id="submit" class="w-full px-3 py-3 font-medium text-white bg-green-400 rounded-lg">Request now</button>
</form>

    Method: post or get

    Action: Is the link to the page you want to go to when you press submit

    Login or Signup to reply.
  2. 0 
    document.querySelector(".mybtn").addEventListener('click', myfunction);
var loader = document.querySelector(".myloader");
var contents = document.querySelector(".pageContents");
loader.style.display = "none";

function myfunction() {

  loader.style.display = "block";
  contents.style.display = "none";
}
    .myloader {
  position: fixed;
  min-height: 100vh;
  top: 0;
  background-image: url("https://media3.giphy.com/media/KG4PMQ0jyimywxNt8i/giphy.gif?cid=ecf05e47uqzqe9qit5cdf4u7y9fqsw10slzt251h73nx9qri&rid=giphy.gif&ct=g");
  background-repeat: no-repeat;
  background-position: center;
}

.pageContents {
  position: fixed;
  min-height: 100vh;
  top: 0;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="pageContents container bg-success">
    <button type="submit" id="submit" class="m-5 p-2 btn btn-primary rounded-pill mybtn">Request now</button>
  </div>
  <div class="myloader container-fluid">
  </div>


</body>

    Run in fullscreen. To make loading gif to stay longer, use Javascript to set a delay before form submission.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search