Skip to content

Instantly share code, notes, and snippets.

@devnaumov
Created December 17, 2019 06:41
Show Gist options
  • Save devnaumov/8232792e3ff9e2e895d6604edebdc081 to your computer and use it in GitHub Desktop.
Save devnaumov/8232792e3ff9e2e895d6604edebdc081 to your computer and use it in GitHub Desktop.
Loading with custom logo
<!doctype html>
<html lang="en-us">
<head>
<title>Downloading: cash-story</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 100vh;
}
body > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
#loading {
flex-direction: column;
}
progress[value] {
appearance: none;
background-color: #eee;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
width: 50%;
height: 8px
}
</style>
</head>
<body>
<div id="loading">
<div></div>
<img src="blueLogo.png" style="width: 50%"/>
<progress value="0" max="100" id="progress"></progress>
<div id="status">Downloading...</div>
<div></div>
</div>
<div>
<canvas id="canvas" align="center" oncontextmenu="event.preventDefault()"></canvas>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment