Skip to content

Instantly share code, notes, and snippets.

@tlindig

tlindig/wait2.html

Created January 16, 2017 07:47
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/63be228dc0500dc6ee00c3b20672913f to your computer and use it in GitHub Desktop.
Save tlindig/63be228dc0500dc6ee00c3b20672913f to your computer and use it in GitHub Desktop.
Download ZIP
variation of wait animation (3 segments)
Raw
wait2.html
<html>
<style>
.wait {
overflow: hidden;
height: 150px;
width:150px;
}
.circular {
animation: 1.4s 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, 41;
stroke-dashoffset: 0;
stroke-linecap: round;
stroke: red;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 41;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 39, 3;
stroke-dashoffset: 23px;
}
}
</style>
<body>
<div class="wait">
<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