Skip to content

Instantly share code, notes, and snippets.

@steveharoz

steveharoz/spinner-plane.html

Created March 12, 2019 11:56
Show Gist options
  • Save steveharoz/64cb72300d7b1a359b0584e66b8c7861 to your computer and use it in GitHub Desktop.
Save steveharoz/64cb72300d7b1a359b0584e66b8c7861 to your computer and use it in GitHub Desktop.
Download ZIP
Spinner plane
Raw
spinner-plane.html
<body width="100%" height="100%">
<div class="core-page-loader">
<div class="plane-spinner">
<div class="spinner-plane"></div>
</div>
</div>
</body>
<style media="screen" type="text/css">
.core-page-loader {
position: fixed;
width: 100vw;
height: 100vh;
background: #ffffff;
z-index: 1000;
top: 0;
left: 0;
pointer-events: none;
transform: translateZ(0);
}
.core-page-loader .plane-spinner {
margin: 15px auto 0;
}
.core-page-loader .plane-spinner::before {
background: #ffffff;
}
.core-page-loader .plane-spinner::after {
background: #ffffff;
}
.core-page-loader.splash .plane-spinner{
margin: -35px 0px 0px -35px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spinner-plane {
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
background: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Generator%3A%20Adobe%20Illustrator%2018.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20%20--%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20%20%20%20width%3D%2264px%22%20height%3D%2264px%22%20viewBox%3D%220%200%2064%2064%22%20enable-background%3D%22new%200%200%2064%2064%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%20%20%20%20%3Cpath%20fill%3D%22%232091EB%22%20d%3D%22M36.5%2C38.2C36.4%2C38%2C36%2C37.9%2C35.8%2C38l-1.5%2C0.9C34%2C39%2C34%2C39.4%2C34.1%2C39.6l0.2%2C0.3c0.1%2C0.3%2C0.5%2C0.3%2C0.7%2C0.2%20%20%20%20%20%20%20%20l1.5-0.9c0.3-0.1%2C0.3-0.5%2C0.2-0.7L36.5%2C38.2z%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%232091EB%22%20d%3D%22M27.6%2C22.4c-0.1-0.3-0.5-0.3-0.7-0.2L25.4%2C23c-0.3%2C0.1-0.3%2C0.5-0.2%2C0.7l0.2%2C0.3c0.1%2C0.3%2C0.5%2C0.3%2C0.7%2C0.2%20%20%20%20%20%20%20%20l1.5-0.9c0.3-0.1%2C0.3-0.5%2C0.2-0.7L27.6%2C22.4z%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%232091EB%22%20d%3D%22M28.8%2C21.7c-0.1-0.3-0.5-0.3-0.7-0.2l-1.5%2C0.9c-0.3%2C0.1-0.3%2C0.5-0.2%2C0.7l0.2%2C0.3c0.1%2C0.3%2C0.5%2C0.3%2C0.7%2C0.2%20%20%20%20%20%20%20%20l1.5-0.9c0.3-0.1%2C0.3-0.5%2C0.2-0.7L28.8%2C21.7z%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%232091EB%22%20d%3D%22M37.7%2C37.5c-0.1-0.3-0.5-0.3-0.7-0.2l-1.5%2C0.9c-0.3%2C0.1-0.3%2C0.5-0.2%2C0.7l0.2%2C0.3c0.1%2C0.3%2C0.5%2C0.3%2C0.7%2C0.2%20%20%20%20%20%20%20%20l1.5-0.9c0.3-0.1%2C0.3-0.5%2C0.2-0.7L37.7%2C37.5z%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23073590%22%20d%3D%22M19.3%2C36.1c0.4%2C0.7%2C0.1%2C1.5-0.5%2C1.9l-3.7%2C2.1c-0.7%2C0.4-1.5%2C0.1-1.9-0.5L7.9%2C33c-0.7-1-1-1%2C0.5-1.9l0%2C0%20%20%20%20%20%20%20%20c0.7-0.4%2C0.7-0.1%2C1.9%2C0.5L19.3%2C36.1z%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23073590%22%20d%3D%22M20.6%2C38.5c-0.4-0.7-1.2-0.9-1.9-0.5L15%2C40.1c-0.7%2C0.4-0.9%2C1.2-0.5%2C1.9l2.9%2C8c0.5%2C1.1%2C0.3%2C1.4%2C1.9%2C0.5l0%2C0%20%20%20%20%20%20%20%20c0.7-0.4%2C0.4-0.5%2C0.5-1.9L20.6%2C38.5z%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%232091EB%22%20d%3D%22M39%2C17c0.4%2C0.7%2C0.1%2C1.5-0.5%2C1.9L34.8%2C21c-0.7%2C0.4-1.5%2C0.1-1.9-0.5l-0.7-1.2c-0.4-0.7-0.1-1.5%2C0.5-1.9%20%20%20%20%20%20%20%20l3.7-2.1c0.7-0.4%2C1.5-0.1%2C1.9%2C0.5L39%2C17z%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%232091EB%22%20d%3D%22M47.9%2C32.8c0.4%2C0.7%2C0.1%2C1.5-0.5%2C1.9l-3.7%2C2.1c-0.7%2C0.4-1.5%2C0.1-1.9-0.5L41.1%2C35c-0.4-0.7-0.1-1.5%2C0.5-1.9%20%20%20%20%20%20%20%20l3.7-2.1c0.7-0.4%2C1.5-0.1%2C1.9%2C0.5L47.9%2C32.8z%22%2F%3E%20%20%20%20%3Cpath%20fill%3D%22%23073590%22%20d%3D%22M43.9%2C29.8l4.9-2.3c0.3-0.1%2C0.5-0.2%2C0.7-0.3c2.7-1.5%2C8.5-7.7%2C7-10.4s-9.8-0.9-12.5%2C0.6%20%20%20%20%20%20%20%20c-0.2%2C0.1-0.4%2C0.3-0.7%2C0.4l-4.5%2C3l-19-12.2C19%2C8%2C18.6%2C7.6%2C17.9%2C8l-2.4%2C1.4c-1.6%2C0.9-1.2%2C1.1-0.5%2C1.9l12.4%2C13.5l1.5%2C2.6l-2.3%2C1.5%20%20%20%20%20%20%20%20c-6.1%2C3.4-13.1%2C11-12.6%2C11.9c0.6%2C1%2C10.7-1.2%2C16.7-4.6l2.5-1.2l1.5%2C2.6l5.1%2C17.6c0.3%2C1%2C0.3%2C1.4%2C1.9%2C0.5l2.4-1.4%20%20%20%20%20%20%20%20c0.7-0.4%2C0.6-1%2C0.5-1.9L43.9%2C29.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-size: 40px;
background-repeat: no-repeat;
position: relative;
left: 40px;
bottom: 30px;
z-index: 999;
transform: rotate(-16deg);
height: 40px;
width: 40px;
}
.plane-spinner {
height: 70px;
width: 70px;
border-radius: 50px;
background: linear-gradient(to top,#F1C933 10%,rgba(229,229,229,0) 90%);
position: relative;
animation: spin 990ms linear reverse infinite;
-webkit-animation: spin 990ms linear reverse infinite;
}
.plane-spinner::before {
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
content: '';
background: #ffffff;
display: block;
width: 67px;
height: 67px;
border-radius: 100%;
position: relative;
top: 0;
left: 4px;
}
.plane-spinner::after {
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
content: '';
background: #ffffff;
display: block;
position: absolute;
right: 0;
bottom: 0;
}
@-webkit-keyframes spin {
0% {transform: rotate(0deg); }
100% {transform: rotate(360deg); }
}
@keyframes spin {
0% {transform: rotate(0deg); }
100% {transform: rotate(360deg); }
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment