Loading Screen Gets Stuck While Processing Http Request

Stuck on the loading screen (HTML)

You need to add jQuery in your project to make it works

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>

just add here after "[JavaScript]"

EDIT: for the future guys looking at the answer, if you got stucked in some animations not working, check if there are any errors in the console, in this particular answer there was:

$ is not defined

so jQuery was not defined, and adding the source code make it works again!

c# showing a process form seems to get stuck when performing a long running task

The .ShowDialog() on a form is a blocking call, so your code will wait until the form that is shown as dialog is .Closed()

I would also recommend using using async Task as this makes working with Threads much much easier!

I've changed your code to show this.

public partial class Form1 : Form
public Form1()

private async void button1_Click(object sender, EventArgs e)
await completeSale();

AjaxLoader loader = null;
public async Task completeSale()//invoked on Sell button
//for info, this is how I set up AjaxLoader form properties in the designer.
loader = new AjaxLoader();
loader.label1.Text = "Printing...";
loader.TopMost = true;
loader.WindowState = FormWindowState.Normal;
loader.StartPosition = FormStartPosition.CenterParent;
loader.ShowInTaskbar = false;
loader.ControlBox = false;
loader.FormBorderStyle = FormBorderStyle.None;

await Execution();

private async Task Execution()

if (loader.InvokeRequired)
this.Invoke((MethodInvoker)delegate { loader.Show(this); });

await update_sale("Sold");

if (loader.InvokeRequired)
this.Invoke((MethodInvoker)delegate { loader.Close(); });


private async Task update_sale(string v)
//long running process like printing etc..
await Task.Delay(3000);

this will do something like this:

Sample Image

On the AjaxLoader form I added a progress bar that is set to style = Marquee

Flutter: App gets stuck at loading screen

You did not add Internet permission to your AndroidManifest.xml.

Goto android/app/src/main/AndroidManifest.xml and add <uses-permission android:name="android.permission.INTERNET"/> just before the <application

JavaScript Loading Screen while page loads

You can wait until the body is ready:

function onReady(callback) {
var intervalId = window.setInterval(function() {
if (document.getElementsByTagName('body')[0] !== undefined) {
}, 1000);

function setVisible(selector, visible) {
document.querySelector(selector).style.display = visible ? 'block' : 'none';

onReady(function() {
setVisible('.page', true);
setVisible('#loading', false);
body {
background: #FFF url("https://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: 'Alex Brush', cursive !important;

.page { display: none; padding: 0 0.5em; }
.page h1 { font-size: 2em; line-height: 1em; margin-top: 1.1em; font-weight: bold; }
.page p { font-size: 1.5em; line-height: 1.275em; margin-top: 0.15em; }

#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.5);
background-image: url("https://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Alex+Brush" rel="stylesheet">
<div class="page">
<h1>The standard Lorem Ipsum passage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="loading"></div>

Related Topics

Leave a reply