Spinner Two Alt
2K Views
44 Downloads - 9 API calls
26 Lines - 619 Bytes
Apr 23, 2020 shapes interface
1 @keyframes spinner-two-alt { 2 0% { transform: rotate(0deg )} 3 to { transform: rotate(359deg )} 4 } 5 6 .gg-spinner-two-alt,.gg-spinner-two-alt::before { 7 box-sizing: border-box;
8 display: block;
9 width: 20px ;
10 height: 20px 11 } 12 13 .gg-spinner-two-alt { 14 transform: scale(var(--ggs,1 ));
15 position: relative
16 } 17 18 .gg-spinner-two-alt::before { 19 content: "";
20 position: absolute;
21 border-radius: 100px ;
22 animation: spinner-two-alt 1s cubic-bezier(.6 ,0 ,.4 ,1 ) infinite;
23 border: 3px solid transparent;
24 border-bottom-color: currentColor;
25 border-top-color: currentColor
26 }
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 d="M12 22 C17.5228 22 22 17.5228 22 12 H19 C19 15.866 15.866 19 12 19 V22 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M2 12 C2 6.47715 6.47715 2 12 2 V5 C8.13401 5 5 8.13401 5 12 H2 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSpinnerTwoAlt = styled.i` 5 @keyframes spinner-two-alt { 6 0% { 7 transform: rotate(0deg );8 } 9 to { 10 transform: rotate(359deg );11 } 12 } 13 &, 14 &::before { 15 box-sizing: border-box;16 display: block;17 width: 20px ;18 height: 20px ;19 } 20 & { 21 transform: scale(var(--ggs, 1 ));22 position: relative;23 } 24 &::before { 25 content: '';26 position: absolute;27 border-radius: 100px ;28 animation: spinner-two-alt 1s cubic-bezier(0.6 , 0 , 0.4 , 1 ) infinite;29 border: 3px solid transparent;30 border-bottom-color: currentColor;31 border-top-color: currentColor;32 } 33 ` 34 35 export const SpinnerTwoAlt = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledSpinnerTwoAlt { ...props} ref={ ref} icon-role="spinner-two-alt" /> 40 </> 41 ) 42 } , 43 ) 44
Spinner Two Alt is a wonderful CSS icon built by practicing properties like: transform, width, height, border-radius, animation, border, border-bottom-color, border-top-color, Fun to know, it has: 26 Lines of code at 619b & 488b after compression. Truly stunning 🤩 for a CSS designed icon.