Loadbar

4K Views 57 Downloads - 11 API calls 26 Lines - 522 Bytes Apr 23, 2020 interface signs

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

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

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

.gg-loadbar::before {
 content: "";
 position: absolute;
 border-radius: 4px;
 background: currentColor;
 animation: loadbar 2s cubic-bezier(0,0,.58,1) infinite
}

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

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

CSSSVGTSX

1	@keyframes loadbar {
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,
8	.gg-loadbar::before {
9	display: block;
10	box-sizing: border-box;
11	height: 4px
12	}
13
14	.gg-loadbar {
15	position: relative;
16	transform: scale(var(--ggs,1));
17	width: 18px
18	}
19
20	.gg-loadbar::before {
21	content: "";
22	position: absolute;
23	border-radius: 4px;
24	background: currentColor;
25	animation: loadbar 2s cubic-bezier(0,0,.58,1) infinite
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	<rect x="3" y="10" width="18" height="4" rx="2" fill="currentColor" />
9	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledLoadbar = styled.i`
5	@keyframes loadbar {
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	display: block;
24	box-sizing: border-box;
25	height: 4px;
26	}
27	& {
28	position: relative;
29	transform: scale(var(--ggs, 1));
30	width: 18px;
31	}
32	&::before {
33	content: '';
34	position: absolute;
35	border-radius: 4px;
36	background: currentColor;
37	animation: loadbar 2s cubic-bezier(0, 0, 0.58, 1) infinite;
38	}
39	`
40
41	export const Loadbar = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
42	(props, ref) => {
43	return (
44	<>
45	<StyledLoadbar {...props} ref={ref} icon-role="loadbar" />
46	</>
47	)
48	},
49	)
50

HTMLCSSJSONXML

MarkupSVG Sprite

Loadbar ended up a wonderful CSS icon created by applying properties like: left, height, transform, width, border-radius, background, animation,
Fun facts, it has: 26 Lines of code at 522b & 382b after compression. Pretty amazing 😲 for a CSS designed icon.

Loadbar

Thank you!