Skip to content

Instantly share code, notes, and snippets.

@ganapativs

ganapativs/Tiny-Time-Loader.markdown

Created December 20, 2014 19:59
Show Gist options
  • Save ganapativs/68f969c67dcf623481b4 to your computer and use it in GitHub Desktop.
Save ganapativs/68f969c67dcf623481b4 to your computer and use it in GitHub Desktop.
Download ZIP
Tiny Time Loader
Raw
index.html
<svg width="40" height="40" viewbox="0 0 40 40">
<polygon points="0 0 20 20 0 40 40 40 20 20 40 0" class="rect" />
</svg>
Raw
style.css
svg {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.rect {
fill: #4285f4;
stroke-width: 4px;
stroke: #FF5E99;
stroke-dasharray: 85;
stroke-dashoffset: 50%;
-webkit-animation: movedash 1.5s forwards 0s infinite alternate;
animation: movedash 1.5s forwards 0s infinite alternate;
}
@-webkit-keyframes movedash {
from {
stroke-dashoffset: 0%;
fill:#355C7D;
stroke: #F8B195;
}
to {
stroke-dashoffset: 250%;
stroke-width: 6px;
}
}
@keyframes movedash {
from {
stroke-dashoffset: 0%;
fill:#355C7D;
stroke: #F8B195;
}
to {
stroke-dashoffset: 250%;
stroke-width: 6px;
}
}
Raw
Tiny-Time-Loader.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment