Spinner Two
Views
Downloads - API calls
36 Lines - 763 Bytes
Apr 23, 2020 interface shapes
1 @keyframes spinner-two { 2 0% { transform: rotate(0deg )} 3 to { transform: rotate(359deg )} 4 } 5 6 .gg-spinner-two { 7 transform: scale(var(--ggs,1 ));
8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 20px ;
12 height: 20px 13 } 14 15 .gg-spinner-two::after ,
16 .gg-spinner-two::before { 17 box-sizing: border-box;
18 display: block;
19 width: 20px ;
20 height: 20px ;
21 content: "";
22 position: absolute;
23 border-radius: 100px 24 } 25 26 .gg-spinner-two::before { 27 animation: spinner-two 1s cubic-bezier(.6 ,0 ,.4 ,1 ) infinite;
28 border: 3px solid transparent;
29 border-bottom-color: currentColor;
30 border-top-color: currentColor
31 } 32 33 .gg-spinner-two::after { 34 border: 3px solid;
35 opacity: .2 36 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path 9 opacity="0.2 " 10 fill-rule="evenodd" 11 clip-rule="evenodd" 12 d="M12 19 C15.866 19 19 15.866 19 12 C19 8.13401 15.866 5 12 5 C8.13401 5 5 8.13401 5 12 C5 15.866 8.13401 19 12 19 ZM12 22 C17.5228 22 22 17.5228 22 12 C22 6.47715 17.5228 2 12 2 C6.47715 2 2 6.47715 2 12 C2 17.5228 6.47715 22 12 22 Z" 13 fill="currentColor" 14 /> 15 <path 16 d="M12 22 C17.5228 22 22 17.5228 22 12 H19 C19 15.866 15.866 19 12 19 V22 Z" 17 fill="currentColor" 18 /> 19 <path 20 d="M2 12 C2 6.47715 6.47715 2 12 2 V5 C8.13401 5 5 8.13401 5 12 H2 Z" 21 fill="currentColor" 22 /> 23 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSpinnerTwo = styled.i` 5 @keyframes spinner-two { 6 0% { 7 transform: rotate(0deg );8 } 9 to { 10 transform: rotate(359deg );11 } 12 } 13 & { 14 transform: scale(var(--ggs, 1 ));15 box-sizing: border-box;16 position: relative;17 display: block;18 width: 20px ;19 height: 20px ;20 } 21 &::after , 22 &::before { 23 box-sizing: border-box;24 display: block;25 width: 20px ;26 height: 20px ;27 content: '';28 position: absolute;29 border-radius: 100px ;30 } 31 &::before { 32 animation: spinner-two 1s cubic-bezier(0.6 , 0 , 0.4 , 1 ) infinite;33 border: 3px solid transparent;34 border-bottom-color: currentColor;35 border-top-color: currentColor;36 } 37 &::after { 38 border: 3px solid;39 opacity: 0.2 ;40 } 41 ` 42 43 export const SpinnerTwo = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 44 (props, ref) => { 45 return ( 46 <> 47 <StyledSpinnerTwo { ...props} ref={ ref} icon-role="spinner-two" /> 48 </> 49 ) 50 } , 51 ) 52
Spinner Two developed into a magic CSS icon built by applying attributes as follows: transform, width, height, content, border-radius, border, border-bottom-color, border-top-color, opacity, Some stats, it has: 36 Lines of code at 763b & 581b after compiling. Pretty amazing 😲 huhh.