Skip to content

Instantly share code, notes, and snippets.

@kristw

kristw/loading.html

Created December 13, 2013 02:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kristw/7939027 to your computer and use it in GitHub Desktop.
Save kristw/7939027 to your computer and use it in GitHub Desktop.
Download ZIP
Simple float loading component
Raw
loading.html
<html>
<body>
<!-- Loading -->
<div class="loading-sign-wrap">
<div class="loading-sign">
<div class="loading-title">
loading
</div>
<img src="images/progress_bar.gif" alt="">
<div class="loading-subtitle">
Processing data ... please wait
</div>
</div>
</div>
</body>
</html>
Raw
style.less
.loading-sign-wrap{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
right: 240px;
.loading-sign{
position: absolute;
top: 50%;
left: 50%;
padding: 7px 12px 10px 12px;
margin-left: -122px;
margin-top: -20px;
width: 244px;
background-color: #222;
text-align: center;
opacity: 0.95;
z-index: 19;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
.loading-title{
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
.loading-subtitle{
padding: 4px 4px 1px 4px;
font-size: 12px;
color: #ddd;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment