Skip to content

Instantly share code, notes, and snippets.

@minedun6
Last active November 9, 2018 09:24
Show Gist options
  • Save minedun6/6747cf6684b8e745aaab117a657a06c8 to your computer and use it in GitHub Desktop.
Save minedun6/6747cf6684b8e745aaab117a657a06c8 to your computer and use it in GitHub Desktop.
Orbit spinner html/vue
<!--https://epic-spinners.epicmax.co/-->
<div class="orbit-spinner">
<div class="orbit"></div>
<div class="orbit"></div>
<div class="orbit"></div>
</div>
<template>
<orbit-spinner
:animation-duration="1200"
:size="55"
color="#ff1d5e"
/>
</template>
<script>
import { OrbitSpinner } from 'epic-spinners'
export default {
components: {
OrbitSpinner
}
}
</script>
.orbit-spinner, .orbit-spinner * {
box-sizing: border-box;
}
.orbit-spinner {
height: 55px;
width: 55px;
border-radius: 50%;
perspective: 800px;
}
.orbit-spinner .orbit {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.orbit-spinner .orbit:nth-child(1) {
left: 0%;
top: 0%;
animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;
border-bottom: 3px solid #ff1d5e;
}
.orbit-spinner .orbit:nth-child(2) {
right: 0%;
top: 0%;
animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;
border-right: 3px solid #ff1d5e;
}
.orbit-spinner .orbit:nth-child(3) {
right: 0%;
bottom: 0%;
animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;
border-top: 3px solid #ff1d5e;
}
@keyframes orbit-spinner-orbit-one-animation {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes orbit-spinner-orbit-two-animation {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes orbit-spinner-orbit-three-animation {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment