HTML
<svg class="Loader" width="128" height="128" viewBox="0 0 64 64">
<path d="M32,4 L60,56 L4,56 Z"></path>
<circle r="4" cx="32" cy="0"></circle>
</svg>
CSS
html,
body {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.Loader path {
stroke-width: 2;
stroke: #000;
fill: transparent;
}
.Loader circle {
cx: 32px;
cy: 4px;
-webkit-animation: 1s loading ease infinite;
animation: 1s loading ease infinite;
}
@-webkit-keyframes loading {
33% {
cx: 60px;
cy: 56px;
}
66% {
cx: 4px;
cy: 56px;
}
}
@keyframes loading {
33% {
cx: 60px;
cy: 56px;
}
66% {
cx: 4px;
cy: 56px;
}
}
