Loadbar Alt

3K Views 55 Downloads - 12 API calls 36 Lines - 690 Bytes Apr 23, 2020 signs interface

 @keyframes loadbaralt {
 0%,to { left: 0; right: 80% }
 25%,75% { left: 0; right: 0 }
 50% { left: 80%; right: 0 }
}

.gg-loadbar-alt,
.gg-loadbar-alt::before,
.gg-loadbar-alt::after {
 display: block;
 box-sizing: border-box;
 height: 4px;
 border-radius: 4px
}

.gg-loadbar-alt {
 position: relative;
 transform: scale(var(--ggs,1));
 width: 18px
}

.gg-loadbar-alt::after,
.gg-loadbar-alt::before {
 background: currentColor;
 content: "";
 position: absolute
}

.gg-loadbar-alt::before {
 animation: loadbaralt 2s cubic-bezier(0,0,.58,1) infinite
}

.gg-loadbar-alt::after {
 width: 18px;
 opacity: .3
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect opacity="0.3" x="3" y="10" width="18" height="4" rx="2" fill="currentColor" /><rect x="7" y="10" width="10" height="4" rx="2" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledLoadbarAlt = styled.i` @keyframes loadbaralt { 0%, to { left: 0; right: 80%; } 25%, 75% { left: 0; right: 0; } 50% { left: 80%; right: 0; } } &, &::before, &::after { display: block; box-sizing: border-box; height: 4px; border-radius: 4px; } & { position: relative; transform: scale(var(--ggs, 1)); width: 18px; } &::after, &::before { background: currentColor; content: ''; position: absolute; } &::before { animation: loadbaralt 2s cubic-bezier(0, 0, 0.58, 1) infinite; } &::after { width: 18px; opacity: 0.3; }`export const LoadbarAlt = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledLoadbarAlt {...props} ref={ref} icon-role="loadbar-alt" /></> ) },)

CSSSVGTSX

1	@keyframes loadbaralt {
2	0%,to { left: 0; right: 80% }
3	25%,75% { left: 0; right: 0 }
4	50% { left: 80%; right: 0 }
5	}
6
7	.gg-loadbar-alt,
8	.gg-loadbar-alt::before,
9	.gg-loadbar-alt::after {
10	display: block;
11	box-sizing: border-box;
12	height: 4px;
13	border-radius: 4px
14	}
15
16	.gg-loadbar-alt {
17	position: relative;
18	transform: scale(var(--ggs,1));
19	width: 18px
20	}
21
22	.gg-loadbar-alt::after,
23	.gg-loadbar-alt::before {
24	background: currentColor;
25	content: "";
26	position: absolute
27	}
28
29	.gg-loadbar-alt::before {
30	animation: loadbaralt 2s cubic-bezier(0,0,.58,1) infinite
31	}
32
33	.gg-loadbar-alt::after {
34	width: 18px;
35	opacity: .3
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	<rect opacity="0.3" x="3" y="10" width="18" height="4" rx="2" fill="currentColor" />
9	<rect x="7" y="10" width="10" height="4" rx="2" fill="currentColor" />
10	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledLoadbarAlt = styled.i`
5	@keyframes loadbaralt {
6	0%,
7	to {
8	left: 0;
9	right: 80%;
10	}
11	25%,
12	75% {
13	left: 0;
14	right: 0;
15	}
16	50% {
17	left: 80%;
18	right: 0;
19	}
20	}
21	&,
22	&::before,
23	&::after {
24	display: block;
25	box-sizing: border-box;
26	height: 4px;
27	border-radius: 4px;
28	}
29	& {
30	position: relative;
31	transform: scale(var(--ggs, 1));
32	width: 18px;
33	}
34	&::after,
35	&::before {
36	background: currentColor;
37	content: '';
38	position: absolute;
39	}
40	&::before {
41	animation: loadbaralt 2s cubic-bezier(0, 0, 0.58, 1) infinite;
42	}
43	&::after {
44	width: 18px;
45	opacity: 0.3;
46	}
47	`
48
49	export const LoadbarAlt = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
50	(props, ref) => {
51	return (
52	<>
53	<StyledLoadbarAlt {...props} ref={ref} icon-role="loadbar-alt" />
54	</>
55	)
56	},
57	)
58

HTMLCSSJSONXML

MarkupSVG Sprite

Loadbar Alt ended up a wonderful CSS icon built by practicing attributes such as: left, height, border-radius, transform, width, content, opacity,
Fun to know, it has: 36 Lines of code at 690b & 519b after compiling. Pretty amazing 😲 .

Loadbar Alt

Thank you!