Skip to content

Instantly share code, notes, and snippets.

@ScheerMT

ScheerMT/wifi-spin.html

Created September 7, 2015 03:30
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 ScheerMT/c84335a4bce10a0a3b5d to your computer and use it in GitHub Desktop.
Save ScheerMT/c84335a4bce10a0a3b5d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wifi-spin.html
<html>
<!-- Stolen From https://github.com/nubleh/nubleh.github.io/blob/master/anim/index.html -->
<!-- Motivation from: https://www.reddit.com/r/gifs/comments/3jw277/wifi_loading_wheel/ -->
<head>
<style type="text/css">
@-webkit-keyframes rotate {
0% {
-webkit-transform: none;
}
100% {
-webkit-transform: rotateZ(360deg);
}
}
@-moz-keyframes rotate {
0% {
-moz-transform: none;
}
100% {
-moz-transform: rotateZ(360deg);
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 10px;
background: #cccccc;
overflow: hidden;
}
.container {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
-webkit-animation: rotate 2s linear infinite;
-moz-animation: rotate 2s linear infinite;
}
.ring {
padding: 5px;
width: 100%;
height: 100%;
border: solid 20px black;
border-color: black transparent white transparent;
-webkit-border-radius:100%;
-webkit-animation: rotate 20s linear infinite reverse;
border-radius:100%;
-moz-animation: rotate 20s linear infinite reverse;
}
</style>
</head>
<body>
<div class="container">
<div class="ring"><div class="ring"><div class="ring"><div class="ring"><div class="ring"><div class="ring"><div class="ring"><div class="ring"><div class="ring"></div></div></div></div></div></div></div></div></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment