Search Loading
3K Views
46 Downloads - 7 API calls
38 Lines - 756 Bytes
Apr 23, 2020 interface
1 .gg-search-loading { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 16px ;
8 border: 2px solid;
9 border-radius: 100% ;
10 margin-left: -4px ;
11 margin-top: -4px 12 } 13 14 .gg-search-loading::after ,
15 .gg-search-loading::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute;
20 width: 2px ;
21 background: currentColor
22 } 23 24 .gg-search-loading::after { 25 border-radius: 3px ;
26 height: 8px ;
27 transform: rotate(-45deg );
28 top: 10px ;
29 left: 12px 30 } 31 32 .gg-search-loading::before { 33 height: 2px ;
34 border-radius: 100% ;
35 top: 5px ;
36 left: 5px ;
37 box-shadow: -3px 0 0 ,3px 0 0 38 }
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="M8.55024 10.5503 C8.55024 11.1026 8.10253 11.5503 7.55024 11.5503 C6.99796 11.5503 6.55024 11.1026 6.55024 10.5503 C6.55024 9.99801 6.99796 9.55029 7.55024 9.55029 C8.10253 9.55029 8.55024 9.99801 8.55024 10.5503 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M10.5502 11.5503 C11.1025 11.5503 11.5502 11.1026 11.5502 10.5503 C11.5502 9.99801 11.1025 9.55029 10.5502 9.55029 C9.99796 9.55029 9.55024 9.99801 9.55024 10.5503 C9.55024 11.1026 9.99796 11.5503 10.5502 11.5503 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M13.5502 11.5503 C14.1025 11.5503 14.5502 11.1026 14.5502 10.5503 C14.5502 9.99801 14.1025 9.55029 13.5502 9.55029 C12.998 9.55029 12.5502 9.99801 12.5502 10.5503 C12.5502 11.1026 12.998 11.5503 13.5502 11.5503 Z" 18 fill="currentColor" 19 /> 20 <path 21 fill-rule="evenodd" 22 clip-rule="evenodd" 23 d="M16.2071 4.89344 C19.0922 7.7786 19.313 12.3192 16.8693 15.4577 C16.8846 15.4712 16.8996 15.4853 16.9142 15.4999 L21.1568 19.7426 C21.5473 20.1331 21.5473 20.7663 21.1568 21.1568 C20.7663 21.5473 20.1331 21.5473 19.7426 21.1568 L15.5 16.9141 C15.4853 16.8995 15.4713 16.8846 15.4578 16.8693 C12.3193 19.3131 7.77858 19.0923 4.89338 16.2071 C1.76918 13.083 1.76918 8.01763 4.89338 4.89344 C8.01757 1.76924 13.0829 1.76924 16.2071 4.89344 ZM6.30759 14.7929 C8.65074 17.1361 12.4497 17.1361 14.7929 14.7929 C17.136 12.4498 17.136 8.6508 14.7929 6.30765 C12.4497 3.96451 8.65074 3.96451 6.30759 6.30765 C3.96445 8.6508 3.96445 12.4498 6.30759 14.7929 Z" 24 fill="currentColor" 25 /> 26 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSearchLoading = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 16px ;12 border: 2px solid;13 border-radius: 100% ;14 margin-left: -4px ;15 margin-top: -4px ;16 } 17 &::after , 18 &::before { 19 content: '';20 display: block;21 box-sizing: border-box;22 position: absolute;23 width: 2px ;24 background: currentColor;25 } 26 &::after { 27 border-radius: 3px ;28 height: 8px ;29 transform: rotate(-45deg );30 top: 10px ;31 left: 12px ;32 } 33 &::before { 34 height: 2px ;35 border-radius: 100% ;36 top: 5px ;37 left: 5px ;38 box-shadow: -3px 0 0 , 3px 0 0 ;39 } 40 ` 41 42 export const SearchLoading = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 43 (props, ref) => { 44 return ( 45 <> 46 <StyledSearchLoading { ...props} ref={ ref} icon-role="search-loading" /> 47 </> 48 ) 49 } , 50 ) 51
Search Loading became an amazing 100% CSS icon made by using properties like: transform, width, height, border, border-radius, background, box-shadow, Fun to know, it has: 38 Lines of code at 756b & 548b after compression. Truly marvelous 💎 don't you think ?.