Search Loading

2K Views 43 Downloads - 7 API calls 38 Lines - 756 Bytes Apr 23, 2020 interface

 .gg-search-loading {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 16px;
 height: 16px;
 border: 2px solid;
 border-radius: 100%;
 margin-left: -4px;
 margin-top: -4px
}

.gg-search-loading::after,
.gg-search-loading::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 2px;
 background: currentColor
}

.gg-search-loading::after {
 border-radius: 3px;
 height: 8px;
 transform: rotate(-45deg);
 top: 10px;
 left: 12px
}

.gg-search-loading::before {
 height: 2px;
 border-radius: 100%;
 top: 5px;
 left: 5px;
 box-shadow: -3px 0 0,3px 0 0
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.55024 10.5503C8.55024 11.1026 8.10253 11.5503 7.55024 11.5503C6.99796 11.5503 6.55024 11.1026 6.55024 10.5503C6.55024 9.99801 6.99796 9.55029 7.55024 9.55029C8.10253 9.55029 8.55024 9.99801 8.55024 10.5503Z" fill="currentColor" /><path d="M10.5502 11.5503C11.1025 11.5503 11.5502 11.1026 11.5502 10.5503C11.5502 9.99801 11.1025 9.55029 10.5502 9.55029C9.99796 9.55029 9.55024 9.99801 9.55024 10.5503C9.55024 11.1026 9.99796 11.5503 10.5502 11.5503Z" fill="currentColor" /><path d="M13.5502 11.5503C14.1025 11.5503 14.5502 11.1026 14.5502 10.5503C14.5502 9.99801 14.1025 9.55029 13.5502 9.55029C12.998 9.55029 12.5502 9.99801 12.5502 10.5503C12.5502 11.1026 12.998 11.5503 13.5502 11.5503Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M16.2071 4.89344C19.0922 7.7786 19.313 12.3192 16.8693 15.4577C16.8846 15.4712 16.8996 15.4853 16.9142 15.4999L21.1568 19.7426C21.5473 20.1331 21.5473 20.7663 21.1568 21.1568C20.7663 21.5473 20.1331 21.5473 19.7426 21.1568L15.5 16.9141C15.4853 16.8995 15.4713 16.8846 15.4578 16.8693C12.3193 19.3131 7.77858 19.0923 4.89338 16.2071C1.76918 13.083 1.76918 8.01763 4.89338 4.89344C8.01757 1.76924 13.0829 1.76924 16.2071 4.89344ZM6.30759 14.7929C8.65074 17.1361 12.4497 17.1361 14.7929 14.7929C17.136 12.4498 17.136 8.6508 14.7929 6.30765C12.4497 3.96451 8.65074 3.96451 6.30759 6.30765C3.96445 8.6508 3.96445 12.4498 6.30759 14.7929Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledSearchLoading = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border: 2px solid; border-radius: 100%; margin-left: -4px; margin-top: -4px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; width: 2px; background: currentColor; } &::after { border-radius: 3px; height: 8px; transform: rotate(-45deg); top: 10px; left: 12px; } &::before { height: 2px; border-radius: 100%; top: 5px; left: 5px; box-shadow: -3px 0 0, 3px 0 0; }`export const SearchLoading = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledSearchLoading {...props} ref={ref} icon-role="search-loading" /></> ) },)

CSSSVGTSX

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.5503C8.55024 11.1026 8.10253 11.5503 7.55024 11.5503C6.99796 11.5503 6.55024 11.1026 6.55024 10.5503C6.55024 9.99801 6.99796 9.55029 7.55024 9.55029C8.10253 9.55029 8.55024 9.99801 8.55024 10.5503Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M10.5502 11.5503C11.1025 11.5503 11.5502 11.1026 11.5502 10.5503C11.5502 9.99801 11.1025 9.55029 10.5502 9.55029C9.99796 9.55029 9.55024 9.99801 9.55024 10.5503C9.55024 11.1026 9.99796 11.5503 10.5502 11.5503Z"
14	fill="currentColor"
15	/>
16	<path
17	d="M13.5502 11.5503C14.1025 11.5503 14.5502 11.1026 14.5502 10.5503C14.5502 9.99801 14.1025 9.55029 13.5502 9.55029C12.998 9.55029 12.5502 9.99801 12.5502 10.5503C12.5502 11.1026 12.998 11.5503 13.5502 11.5503Z"
18	fill="currentColor"
19	/>
20	<path
21	fill-rule="evenodd"
22	clip-rule="evenodd"
23	d="M16.2071 4.89344C19.0922 7.7786 19.313 12.3192 16.8693 15.4577C16.8846 15.4712 16.8996 15.4853 16.9142 15.4999L21.1568 19.7426C21.5473 20.1331 21.5473 20.7663 21.1568 21.1568C20.7663 21.5473 20.1331 21.5473 19.7426 21.1568L15.5 16.9141C15.4853 16.8995 15.4713 16.8846 15.4578 16.8693C12.3193 19.3131 7.77858 19.0923 4.89338 16.2071C1.76918 13.083 1.76918 8.01763 4.89338 4.89344C8.01757 1.76924 13.0829 1.76924 16.2071 4.89344ZM6.30759 14.7929C8.65074 17.1361 12.4497 17.1361 14.7929 14.7929C17.136 12.4498 17.136 8.6508 14.7929 6.30765C12.4497 3.96451 8.65074 3.96451 6.30759 6.30765C3.96445 8.6508 3.96445 12.4498 6.30759 14.7929Z"
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

HTMLCSSJSONXML

MarkupSVG Sprite

Search Loading became a magic pure CSS icon made by using attributes such as: transform, width, height, border, border-radius, background, box-shadow,
Some stats, it has: 38 Lines of code at 756b & 548b after compression. Quite awesome 🙆‍♂️ don't you think ?.

Search Loading

Thank you!