Light Spinner

Amazon Alexa - Light Spinner

@@ -0,0 +1,87 @@
+<div class="spinner"></div>
+
+<style>
+.spinner {
+    position: relative;
+    margin: auto;
+    box-sizing: border-box;
+    background-clip: padding-box;
+    width: 200px;
+    height: 200px;
+    border-radius: 100px;
+    border: 4px solid rgba(255, 255, 255, 0.1);
+    -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), black 90%);
+    transform-origin: 50% 60%;
+    transform: perspective(200px) rotateX(66deg);
+    animation: spinner-wiggle 1.2s infinite;
+}
+
+@keyframes spinner-wiggle {
+    30% {
+        transform: perspective(200px) rotateX(66deg);
+    }
+    40% {
+        transform: perspective(200px) rotateX(65deg);
+    }
+    50% {
+        transform: perspective(200px) rotateX(68deg);
+    }
+    60% {
+        transform: perspective(200px) rotateX(64deg);
+    }
+}
+
+.spinner:before,
+.spinner:after {
+    content: "";
+    position: absolute;
+    margin: -4px;
+    box-sizing: inherit;
+    width: inherit;
+    height: inherit;
+    border-radius: inherit;
+    opacity: .05;
+    border: inherit;
+    border-color: transparent;
+    animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
+}
+
+.spinner:before {
+    border-top-color: #66e6ff;
+}
+
+.spinner:after {
+    border-top-color: #f0db75;
+    animation-delay: 0.3s;
+}
+
+@keyframes spinner-spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spinner-fade {
+    20% {
+        opacity: .1;
+    }
+    40% {
+        opacity: 1;
+    }
+    60% {
+        opacity: .1;
+    }
+}
+
+body {
+    display: flex;
+    padding: 50px;
+    box-sizing: border-box;
+    background: radial-gradient(#1f3a47, #0b1114);
+}
+
+html, body {
+    height: 100%;
+}
+
+</style>