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
HTML
<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>
</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>
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?
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
System.Threading.Thread.Sleep(5000);
//trying to dislay the right-check arro after the time delay
checkicon.Style["display"] = "block";
}
}
