Skip to content

Instantly share code, notes, and snippets.

@andrebian
Last active December 9, 2016 11:50
Embed
What would you like to do?
A WhatsApp Web loading clone
<html>
<head>
<title>Zap Loading - A WhatsApp Web loading clone</title>
<meta charset="UTF-8">
<meta name="description" content="A WhatsApp Web loading clone">
<meta name="keywords" content="loading, loading svg">
<style>
.spinner-container {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
z-index: 2;
}
.spinner-container .path {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
stroke: #663399;
stroke-linecap: round;
-webkit-animation: dash 1.5s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
@-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
@keyframes appear {
0% {
opacity: 0.5;
transform: scaleY(0);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
@-webkit-keyframes appear {
0% {
opacity: 0.5;
transform: scaleY(0);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
</style>
</head>
<body>
<svg class="spinner-container" width="50px" height="50px" viewBox="0 0 52 52">
<circle class="path" cx="26px" cy="26px" r="20px" fill="none" stroke-width="4px"></circle>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment