Skip to content

Instantly share code, notes, and snippets.

@TomasBouda

TomasBouda/App_offline.htm

Last active November 12, 2019 18:35
Show Gist options
  • Save TomasBouda/176632ebcccaf684ea09231935f4d300 to your computer and use it in GitHub Desktop.
Save TomasBouda/176632ebcccaf684ea09231935f4d300 to your computer and use it in GitHub Desktop.
Download ZIP
Offline page for IIS, with auto reload
Raw
App_offline.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="10"/>
<title>Site Maintenance</title>
<style>
body
{
margin: 0px;
text-align: center;
font: 20px Helvetica, sans-serif;
color: #333;
}
h1
{
font-size: 50px;
}
article
{
margin: 150px;
display: block;
text-align: left;
width: 650px;
margin: 0 auto;
}
.status-bar{
width: 100%;
position: absolute;
bottom:0px;
left: 0px;
}
.lds-dual-ring {
margin: auto;
width: 50px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 46px;
height: 46px;
margin: 1px;
border-radius: 50%;
border: 5px solid #333;
border-color: #333 transparent #333 transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.progress-container
{
width: 100%;
color:#000!important;
background-color:#f1f1f1!important
}
.progress-bar{
color: #fff!important;
background-color: #2196F3!important;
}
</style>
</head>
<body>
<article>
<h1>Update in progress...</h1>
<div>
<p>Sorry for the inconvenience but we&rsquo;re performing maintenance at the moment.</p>
</div>
</article>
<div class="lds-dual-ring"></div>
<div class="status-bar">
<div class="progress-container">
<div class="progress-bar" style="width:#progress#%">#progress#%</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment