Circle loader during page loading and right check animation when the page loads

Question

Circle loader during page loading and right check animation when the page loads

Donald Symmons 3,066

I have a circular loader and a right-check icon. The cirular loader displays on page load and the right-check icon is an animated display that shows when the checkbox is clicked.

How can I make it that instead of clicking the CheckBox to display the animated right-check icon, the animated right-check icon will automatically show based on set time on page load event?

Currently, when the page is loading, nothing is displayed; until after the page loads is when the circle loader shows. But I want it that when during when the browser/page is loading, the circle loader should show immediately and upon when the page finishes to load the animated right-check icon should display

CSS

    <style type="text/css">
        body{
            padding: 3em;
            text-align: center;
        }
        h1{
            margin: 1em;
        }
        #label{
            position: relative;
            height: 125px;
            width: 125px;
            display: inline-block;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            border-left-color: #5cb85c;
            animation: rotate 1.2s linear infinite;
        }
        @keyframes rotate {
            50%{
                border-left-color: #9b59b6;
            }
            75%{
                border-left-color: #e67e22;
            }
            100%{
                transform: rotate(360deg);
            }
        }
        #label .check-icon{
            display: none;
        }
        #label .check-icon:after{
            position: absolute;
            content: "";
            top: 50%;
            left: 28px;
            transform: scaleX(-1) rotate(135deg);
            height: 56px;
            width: 28px;
            border-top: 4px solid #5cb85c;
            border-right: 4px solid #5cb85c;
            transform-origin: left top;
            animation: check-icon 0.8s ease;
        }
        @keyframes check-icon {
            0%{
                height: 0;
                width: 0;
                opacity: 1;
            }
            20%{
                height: 0;
                width: 28px;
                opacity: 1;
            }
            100%{
                height: 56px;
                width: 28px;
                opacity: 1;
            }
        }
        input:checked ~ #label .check-icon{
            display: block;
        }
        input:checked ~ #label{
            animation: none;
            border-color: #5cb85c;
            transition: border 0.5s ease-out;
        }
    </style>

HTML

 <div>
            <h1>Loader with Check</h1>

            <input type="checkbox" runat="server" id="check" />
            <div for="" runat="server" class="loading" id="label">
                <div class="check-icon" runat="server" id="checkicon"></div>
            </div>
        </div>

I tried to do this on page load, in order to set a time frame when the animated check icon will display. But I can't seem to get it done. Please any help?

protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                checkicon.Style["display"] = "none";
                System.Threading.Thread.Sleep(5000);

                //trying to dislay the right-check arro after the time delay
                checkicon.Style["display"] = "block";
            }
        }

Accepted answer

2 additional answers

Your answer

Answer 1

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @Donald Symmons,

I tried to do this on page load, in order to set a time frame when the animated check icon will display. But I can't seem to get it done. Please any help?

Every code you write on the server side will run before the browser renders the page.

You'd better implement this on the client side, perhaps using a Javascript method.

You can refer to the following code:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 <script>
     $(document).ready(function () {
         document.getElementById('checkicon').style.display = 'block';
         setTimeout(function () {
             document.getElementById('label').style.animation = 'none';
             document.getElementById('label').style.borderColor = "#5cb85c";
             document.getElementById('label').style.transition = "border 0.5s ease-out";
         }, 5000);
     });
 </script>

All Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type="text/css">
        body{
            padding: 3em;
            text-align: center;
        }
        h1{
            margin: 1em;
        }
        #label{
            position: relative;
            height: 125px;
            width: 125px;
            display: inline-block;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            border-left-color: #5cb85c;
            animation: rotate 1.2s linear infinite;
        }
        @keyframes rotate {
            50%{
                border-left-color: #9b59b6;
            }
            75%{
                border-left-color: #e67e22;
            }
            100%{
                transform: rotate(360deg);
            }
        }
        #label .check-icon{
            display: none;
        }
        #label .check-icon:after{
            position: absolute;
            content: "";
            top: 50%;
            left: 28px;
            transform: scaleX(-1) rotate(135deg);
            height: 56px;
            width: 28px;
            border-top: 4px solid #5cb85c;
            border-right: 4px solid #5cb85c;
            transform-origin: left top;
            animation: check-icon 0.8s ease;
        }
        @keyframes check-icon {
            0%{
                height: 0;
                width: 0;
                opacity: 1;
            }
            20%{
                height: 0;
                width: 28px;
                opacity: 1;
            }
            100%{
                height: 56px;
                width: 28px;
                opacity: 1;
            }
        }
      /*  input:checked ~ #label .check-icon{
            display: block;
        }
        input:checked ~ #label{
            animation: none;
            border-color: #5cb85c;
            transition: border 0.5s ease-out;
        }*/
    </style>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
   <script>
       $(document).ready(function () {
           document.getElementById('checkicon').style.display = 'block';
           setTimeout(function () {
               document.getElementById('label').style.animation = 'none';
               document.getElementById('label').style.borderColor = "#5cb85c";
               document.getElementById('label').style.transition = "border 0.5s ease-out";
           }, 5000);
       });
   </script>              
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Loader with Check</h1>

          <%--  <input type="checkbox" runat="server" id="check" />--%>
            <div for="" runat="server" class="loading" id="label">
                <div class="check-icon" runat="server" id="checkicon"></div>
            </div>
        </div>
    </form>
</body>
</html>

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Donald Symmons 3,066 Reputation points

2023-11-15T09:02:00.77+00:00

Hi , From your implementation, shown above, I can see that the check icon shows in the loader when the page loads. Let me walk you through what I want to achieve. I want a situation where when the page is loading, what a user sees is the loader turning. Then the check icon is displayed afterwards indicating that the page has finished loading and then whatever is on that page will show. Its more a situation where for example user wants to display a record on next page and when the user clicks on a button to reveal a record on next page, the user is redirected to next page and the first thing the users sees is the circle loader, then the check icon will display to tell the user that record is found. If for a reason record does not exist then an X sign will show indicating "record not found". That's what I want to achieve but I didn't know how to go about it so I decided to learn how to create this loader and check icon to see if I can improvise with that. Thank you

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @Donald Symmons,

I rewrote the code based on your needs. I set up two pages, the first page passes parameters. When Request.QueryString["Name"] has a value, the gridview is loaded and displayed. When there is no value, it is not displayed.

Please see the code below for details.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body {
            padding: 3em;
            text-align: center;
        }

        h1 {
            margin: 1em;
        }

        #label {
            position: relative;
            height: 125px;
            width: 125px;
            display: none;
            margin: auto;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            border-left-color: #5cb85c;
            animation: rotate 1.2s linear infinite;
        }

        @keyframes rotate {
            50% {
                border-left-color: #9b59b6;
            }

            75% {
                border-left-color: #e67e22;
            }

            100% {
                transform: rotate(360deg);
            }
        }

        #label .check-icon {
            display: none;
        }

            #label .check-icon:after {
                position: absolute;
                content: "";
                top: 50%;
                left: 28px;
                transform: scaleX(-1) rotate(135deg);
                height: 56px;
                width: 28px;
                border-top: 4px solid #5cb85c;
                border-right: 4px solid #5cb85c;
                transform-origin: left top;
                animation: check-icon 0.8s ease;
            }

        @keyframes check-icon {
            0% {
                height: 0;
                width: 0;
                opacity: 1;
            }

            20% {
                height: 0;
                width: 28px;
                opacity: 1;
            }

            100% {
                height: 56px;
                width: 28px;
                opacity: 1;
            }
        }
        /*  input:checked ~ #label .check-icon{
            display: block;
        }
        input:checked ~ #label{
            animation: none;
            border-color: #5cb85c;
            transition: border 0.5s ease-out;
        }*/
    </style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        function ShowProgress() {

            setTimeout(function () {
                document.getElementById('label').style.display = 'block';
                //setTimeout(function () {
                //    document.getElementById('checkicon').style.display = 'block';
                //    document.getElementById('label').style.animation = 'none';
                //    document.getElementById('label').style.borderColor = "#5cb85c";
                //    document.getElementById('label').style.transition = "border 0.5s ease-out";
                //}, 4000);
            }, 20);
        }

        function Show() {                       
                setTimeout(function () {
                    document.getElementById('checkicon').style.display = 'block';
                    document.getElementById('label').style.animation = 'none';
                    document.getElementById('label').style.borderColor = "#5cb85c";
                    document.getElementById('label').style.transition = "border 0.5s ease-out";
                }, 4000);
           
        }
        function NO() {
            setTimeout(function () {
                document.getElementById('label').innerHTML = "❌";
                document.getElementById('label').style.animation = 'none';
                document.getElementById('label').style.borderColor = "red";
                document.getElementById('label').style.transition = "border 0.5s ease-out";
            }, 4000);

        }


        $('form').live("submit", function () {
            ShowProgress();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Loader with Check</h1>

            <%--  <input type="checkbox" runat="server" id="check" />--%>
            <div for="" runat="server" class="loading" id="label">
                <div class="check-icon" runat="server" id="checkicon"></div>
            </div>
            <asp:Button ID="btnSubmit" runat="server" Text="Load Customers" OnClick="Submit" />
            <asp:GridView ID="GridView1" runat="server" HorizontalAlign="Center"></asp:GridView>
           
        </div>
    </form>
</body>
</html>

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                string Name = Request.QueryString["Name"];
                if (Name != null)
                {
                    string script = "$(document).ready(function () { $('[id*=btnSubmit]').click();Show(); });";
                    ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);                 
                }
                else
                {
                    string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); NO(); });";
                    ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
                }
            }
        }

        protected void Submit(object sender, EventArgs e)
        {
            // Add Fake Delay to simulate long running process.
            System.Threading.Thread.Sleep(5000);
            string Name = Request.QueryString["Name"];
            if (Name != null)
            {
                LoadCustomers();
            }
        }


        private void LoadCustomers()
        {
            DataTable dt = new DataTable("MyTable");
            dt.Columns.Add(new DataColumn("Col1", typeof(string)));
            dt.Columns.Add(new DataColumn("Col2", typeof(string)));
            dt.Columns.Add(new DataColumn("Col3", typeof(string)));

            for (int i = 0; i < 3; i++)
            {
                DataRow row = dt.NewRow();
                row["Col1"] = "col 1, row " + i;
                row["Col2"] = "col 2, row " + i;
                row["Col3"] = "col 3, row " + i;
                dt.Rows.Add(row);
            }

            GridView1.DataSource = dt;
            GridView1.DataBind();



        }

Request.QueryString["Name"] is not null.

Request.QueryString["Name"] is null.

Answer 2

Bruce (SqlWork.com) 77,686 Volunteer Moderator

your loader animation is generated by the response html. this means the loader can not start until the server has generated the html (processed the request). and the browser has parsed the html.

there are a couple of ways of dong loaders:

the request page starts the loader animation, and it disappears when the new page loads
its a slow page, so the srever renders a fast loading page with the loading, which using javascript requests the slow page
javascript ajax is used to get the slow page's heml and then it displays it. this fully allows the effect you want.

Donald Symmons 3,066 Reputation points

2023-11-15T19:49:07.42+00:00

Hi @Bruce (SqlWork.com), please how can it be done with your explanations ?
Albert Kallal 5,586 Reputation points

2023-11-15T20:01:58.6366667+00:00

I suggest you adopt the design pattern I outlined below in my post. There are as many ways to do this as their are flavors of ice cream (so, you have lots of choices here, and there is no "one way" to do this. However, try the idea in my post below, as it easy to adopt, even with existing buttons and code. The concept here is that standard buttons have both a server side event, and a client side event. We can leverage this to great effect with ease by using both events of the button (client and server side click events).
Donald Symmons 3,066 Reputation points

2023-11-16T02:16:01.4433333+00:00

Hi @Albert Kallal ,

Your pattern has a gridview and button click. I'll do that when the page is loading. What I want to have a loader display when a particular page is visited and when the page finishes loading the animated check will show before the page contents are displayed.

Answer 3

Ok, so the way to deal with this issue is of course to flip the problem around (backwards).

So, what this means is that when you want to show a "please wait"...and you want to do this with great ease?

Then have the button click, or action you JUST clicked show the please wait.

So, say I have a button on a page, and when I click the button, I will load a GridView of data, and while I wait, I want to display a please wait (or animated spinner gif) to show.

So, we have this simple markup (a button, a div area with our text + animated gif), and the GridView.

That button would say be some process button, or even some kind of search. We simple assume the button going to take some time to run.

    <asp:Button ID="cmdLoad" runat="server" Text="Load Hotels"
        OnClick="cmdLoad_Click"
        CssClass="btn myshadow"
        OnClientClick="$('#mywaitarea').show()" />

    <div id="mywaitarea" style="display: none">
        <h4><i>Loading data.. please wait</i></h4>
        <img src="../Content/wait2.gif" width="48" />
    </div>

    <br />
    <br />

    <asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False"
        DataKeyNames="ID" CssClass="table table-hover"
        Width="50%">
        <Columns>
            <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
            <asp:BoundField DataField="LastName" HeaderText="LastName" />
            <asp:BoundField DataField="City" HeaderText="City" />
            <asp:BoundField DataField="HotelName" HeaderText="Hotel" />
            <asp:BoundField DataField="Description" HeaderText="Descriptioin" />
            <asp:TemplateField HeaderText="Edit"
                ItemStyle-HorizontalAlign="Center" ItemStyle-Width="130px">
                <ItemTemplate>
                    <asp:Button ID="cmdEdit" runat="server" Text="Edit"
                        OnClick="cmdEdit_Click"
                        OnClientClick="mywaitandhide()"
                        CssClass="btn myshadow"
                        />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

So, the button click code will "fake" a 3 second delay, since pulling small amounts of data into a GridView occurs very fast!!

Our button code is thus this:

    Protected Sub cmdLoad_Click(sender As Object, e As EventArgs)

        System.Threading.Thread.Sleep("3000")   ' fake a 3 second delay

        GVHotels.DataSource = MyRst("SELECT * FROM tblhotelsA ORDER BY HotelName")
        GVHotels.DataBind()

    End Sub

And now the effect is this:

mywaitgv1

Note VERY close in above how we did NOT have to hide the text and spinner area after we are done. This is due to the fact that we have a post back (that is a full browser round trip). So, the page is posted up to the server, and we the user cannot see ANY effects of the server side code until 100% of the code on the server is done making changes to that browser page. Then the WHOLE NEW page is send from the server back to the client side. Since we are receiving a WHOLE NEW browser copy, then anything we show (or in fact hide) will revert back to its previous settings. In other words, ZERO code is required to hide the spinner/wait text on our part.

So, anytime you need a spinner/wait type of task, trigger it FROM the button or action, and DO NOT attempt to place such wait code in the target side of this equation.

As above shows, it really only ONE line of JavaScript script (Well, in fact above assumes you have jQuery installed).

Share via

Circle loader during page loading and right check animation when the page loads

2 additional answers

Your answer