Skip to content

Instantly share code, notes, and snippets.

@tlindig

tlindig/wait.html

Created January 16, 2017 07:45
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 tlindig/cd5a1755f7a6784803575c0c50770ab2 to your computer and use it in GitHub Desktop.
Save tlindig/cd5a1755f7a6784803575c0c50770ab2 to your computer and use it in GitHub Desktop.
Download ZIP
material wait animation
Raw
wait.html
<html>
<style>
.box {
overflow: hidden;
height: 150px;
width:150px;
}
.circular {
animation: 2s linear 0s normal none infinite running rotate;
height: 100%;
transform-origin: center center 0;
width: 100%;
}
.path {
animation:
1.5s ease-in-out 0s normal none infinite running dash;
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
stroke-linecap: round;
stroke: red;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
</style>
<body>
<div class="box">
<svg viewBox="25 25 50 50" class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment