Skip to content

Instantly share code, notes, and snippets.

@bwindels

bwindels/spinner-svg.html

Last active October 7, 2019 08:12
Show Gist options
  • Save bwindels/f54e17f71040676dee856bab1a8993e4 to your computer and use it in GitHub Desktop.
Save bwindels/f54e17f71040676dee856bab1a8993e4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
spinner-svg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@keyframes spinner {
0% {
transform: rotate(0);
stroke-dasharray: 0 0 10 90;
}
45% {
stroke-dasharray: 0 0 90 10;
}
75% {
stroke-dasharray: 0 50 50 0;
}
100% {
transform: rotate(360deg);
stroke-dasharray: 10 90 0 0;
}
}
.spinner circle {
transform-origin: 50% 50%;
animation-name: spinner;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
fill:none;
stroke: var(--fg-color);
stroke-width: calc(var(--size) * 0.1);
stroke-linecap: butt;
}
.spinner {
width: var(--size);
height: var(--size);
}
div.bar {
display: flex;
align-items: center;
justify-content: center;
background: black;
padding: 10px 20px;
--fg-color: white;
}
div.bar .spinner {
--size: 20px;
}
p {
color: var(--fg-color);
flex: 1;
margin-left: 10px;
}
.large {
margin-top: 20px;
padding: 50px;
--size: 300px;
background: red;
--fg-color: green;
}
</style>
</head>
<body>
<div class="bar">
<svg class="spinner" viewBox="0 0 100% 100%">
<circle cx="50%" cy="50%" r="45%" pathLength="100"></circle>
</svg>
<p>Loading your content now ...</p>
</div>
<div class="large">
<svg class="spinner" viewBox="0 0 100% 100%">
<circle cx="50%" cy="50%" r="45%" pathLength="100"></circle>
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment