Skip to content

Instantly share code, notes, and snippets.

@edwardkenfox

edwardkenfox/blip.html

Created March 26, 2015 08:54
Show Gist options
  • Save edwardkenfox/deb9e28679a4f41fb666 to your computer and use it in GitHub Desktop.
Save edwardkenfox/deb9e28679a4f41fb666 to your computer and use it in GitHub Desktop.
Download ZIP
blip.html
Raw
blip.html
<html>
<head>
<style>
.centered {
width:100%;
height:100%;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-pack:center;
-webkit-box-align:center;
}
.blip {
position:relative;
width: 25px;
height: 25px;
border: 2px dashed rgba(0,0,0,1);
border-radius: 20px;
-webkit-animation-name: blip !important;
-webkit-animation-duration: 700ms !important;
-webkit-animation-iteration-count: infinite !important;
-webkit-animation-timing-function: linear !important;
}
@-webkit-keyframes 'blip' {0% {
-webkit-transform: scale(.1);
opacity: 0;
}
1% {
-webkit-transform: scale(.1);
opacity: .6;
}
60% {
opacity: 0;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
}
}
.vertical-line {
position: fixed;
left: 50%;
top:0;
margin: auto;
width: 1px;
height: 100%;
background-color: rgba(0,0,0,0.05);
box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
border: none;
}
.horizontal-line {
position: fixed;
top: 50%;
left:0;
margin: auto;
height: 1px;
width: 100%;
background-color: rgba(0,0,0,0.0.05);
box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
border: none;
}
</style>
</head>
<body>
<div class="vertical-line"></div>
<div class="horizontal-line"></div>
<div class="centered">
<div class="blip"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment