Skip to content

Instantly share code, notes, and snippets.

@the-machinist
Last active August 21, 2020 07:49
Show Gist options
  • Save the-machinist/4ad276aa4367641b373176bf5e09074e to your computer and use it in GitHub Desktop.
Save the-machinist/4ad276aa4367641b373176bf5e09074e to your computer and use it in GitHub Desktop.
Loader
.loader-container {
width: 40px;
height: 40px;
background-color: #6c6cc7;
border-radius: 30px;
padding: 8px;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.loader-container.show {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}
.loader {
width: 40px;
height: 40px;
transform: rotate(-90deg);
stroke-linecap: round;
stroke-width: 6;
fill: none;
.internal-circle,
.external-circle {
stroke: #fff;
stroke-dashoffset: 0;
transform-origin: center;
}
.internal-circle {
stroke-dasharray: 187;
animation: internal 1s ease-in-out infinite;
opacity: .4;
}
.external-circle {
stroke-dasharray: 312;
animation: external 1s linear infinite;
opacity: .9;
}
}
@keyframes internal {
0% {
stroke-dashoffset: 187;
}
25% {
stroke-dashoffset: 80;
}
100% {
stroke-dashoffset: 187;
transform: rotate(360deg);
}
}
@keyframes external {
0% {
stroke-dashoffset: 312;
transform: rotate(70deg);
}
60% {
stroke-dashoffset: -312;
}
100% {
stroke-dashoffset: -312;
transform: rotate(450deg);
}
}
<div class="loader-container">
<svg class="loader" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<circle class="internal-circle" cx="60" cy="60" r="30"></circle>
<circle class="external-circle" cx="60" cy="60" r="50"></circle>
</svg>
</div>
function toggleLoader() {
document.getElementsByClassName("loader-container")[0].classList.toggle("show");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment