Skip to content

Instantly share code, notes, and snippets.

@ahnerd

ahnerd/splash.html

Created August 3, 2016 21:54
Show Gist options
  • Save ahnerd/c540d1190a58e4e419f283342a41feb1 to your computer and use it in GitHub Desktop.
Save ahnerd/c540d1190a58e4e419f283342a41feb1 to your computer and use it in GitHub Desktop.
Download ZIP
A loading animation to use as a splash screen in an Electron project (http://www.techiediaries.com)
Raw
splash.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
background: #333333;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
@-webkit-keyframes rotate-loading {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes loading-text-opacity {
0% {
opacity: 0
}
20% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
.loading-container,
.loading {
height: 199px;
position: relative;
width: 199px;
border-radius: 100%;
}
.loading-container {
margin: 80px auto;
}
.loading {
border: 2px solid transparent;
border-color: transparent #aaa transparent #aaa;
-webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
-webkit-transform-origin: 50% 50%;
}
.loading-container .loading {
-webkit-transition: all 0.5s ease-in-out;
}
#loading-text {
-webkit-animation: loading-text-opacity 1.5s linear 0s infinite normal;
color: #ccc;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-weight: bold;
margin-top: 72px;
opacity: 0;
position: absolute;
text-align: center;
/*text-transform: uppercase;*/
top: 0;
width: 188px;
font-size: 14px;
}
h1 {
text-align: center;
color: #eee;
}
a
{
color: white;
}
</style>
</head>
<body>
<div class="loading-container">
<div class="loading"></div>
<div id="loading-text">
myApp
</div>
</div>
<h1>Loading .. Wait..</h1>
<span style="position:absolute;bottom: 2px;left: 2px;color: white;"><a id="mylink" target="_blank" href="http://www.techiediaries.com">Visit techiediaries.com</a></span>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
var el = document.querySelector('#mylink');
el.addEventListener('click',function(event){
event.preventDefault();
var shell = require('electron').shell;
shell.openExternal(this.href);
});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment