Skip to content

Instantly share code, notes, and snippets.

@cgudea

cgudea/test.html

Last active August 29, 2015 14:16
Show Gist options
  • Save cgudea/a30d49e28cc4964a2340 to your computer and use it in GitHub Desktop.
Save cgudea/a30d49e28cc4964a2340 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.html
<!-- See original blog post: https://www.phyramid.com/blog/monitoring-servers-at-phyramid/ -->
<!-- See my implementation live: http://jsfiddle.net/bp7kp1ts/3/ -->
<html>
<style>
body {
background: #161616 url("https://keymetrics.io/assets/images/pattern.png");
height: 100%;
}
.Absolute-Center {
margin: 4em;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.Absolute-Right {
margin: 0em 4em 0em 14em;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.square {
width: 5em;
height: 5em;
}
@-webkit-keyframes whitespin {
40% {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
80% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes whitespin {
40% {
transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
80% {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes whitespin {
40% {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
80% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
}
#white {
background: #ffffff;
animation: 2s whitespin infinite ease-in-out;
-moz-animation: 2s whitespin infinite ease-in-out;
-webkit-animation: 2s whitespin infinite ease-in-out;
-ms-animation: 2s whitespin infinite ease-in-out;
}
@-webkit-keyframes bluespin {
42% {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
81% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes bluespin {
42% {
transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
81% {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes bluespin {
42% {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
81% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
}
#blue {
background: #01fefe;
animation: 2s bluespin infinite ease-in-out;
-moz-animation: 2s bluespin infinite ease-in-out;
-webkit-animation: 2s bluespin infinite ease-in-out;
-ms-animation: 2s bluespin infinite ease-in-out;
}
@-webkit-keyframes pinkspin {
44% {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
82% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes pinkspin {
44% {
transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
82% {
transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes pinkspin {
45% {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
60% {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
}
#pink {
background: #f401f3;
animation: 2s pinkspin infinite ease-in-out;
-moz-animation: 2s pinkspin infinite ease-in-out;
-webkit-animation: 2s pinkspin infinite ease-in-out;
-ms-animation: 2s pinkspin infinite ease-in-out;
}
</style>
<section>
<div class="square Absolute-Center" id="pink"></div>
<div class="square Absolute-Center" id="blue"></div>
<div class="square Absolute-Center" id="white"></div>
<img class="Absolute-Right" src="https://www.phyramid.com/blog/content/images/2014/Aug/loaded_360.gif"/>
</section>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment