Loadbar Doc

3K Views 52 Downloads - 9 API calls 38 Lines - 745 Bytes Apr 23, 2020 signs interface

 @keyframes gg-doc {
 0% { left: -16px }
 60%,to { left: 0 }
}

.gg-loadbar-doc {
 display: block;
 position: relative;
 box-sizing: border-box;
 transform: scale(var(--ggs,1));
 border: 2px solid transparent;
 box-shadow: 0 0 0 2px;
 border-radius: 1px;
 width: 12px;
 height: 14px;
 overflow: hidden
}

.gg-loadbar-doc::after,
.gg-loadbar-doc::before {
 content: "";
 display: block;
 position: absolute;
 box-sizing: border-box;
 height: 2px;
 background: currentColor;
 animation: gg-doc 1s linear infinite alternate
}

.gg-loadbar-doc::before {
 width: 14px;
 box-shadow: -4px 4px 0
}

.gg-loadbar-doc::after {
 width: 5px;
 top: 8px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5H7C6.44772 5 6 5.44772 6 6V18C6 18.5523 6.44772 19 7 19H17C17.5523 19 18 18.5523 18 18V6C18 5.44772 17.5523 5 17 5ZM7 3C5.34315 3 4 4.34315 4 6V18C4 19.6569 5.34315 21 7 21H17C18.6569 21 20 19.6569 20 18V6C20 4.34315 18.6569 3 17 3H7Z" fill="currentColor" /><path d="M8 7H16V9H8V7Z" fill="currentColor" /><path d="M8 11H16V13H8V11Z" fill="currentColor" /><path d="M8 15H13V17H8V15Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledLoadbarDoc = styled.i` @keyframes gg-doc { 0% { left: -16px; } 60%, to { left: 0; } } & { display: block; position: relative; box-sizing: border-box; transform: scale(var(--ggs, 1)); border: 2px solid transparent; box-shadow: 0 0 0 2px; border-radius: 1px; width: 12px; height: 14px; overflow: hidden; } &::after, &::before { content: ''; display: block; position: absolute; box-sizing: border-box; height: 2px; background: currentColor; animation: gg-doc 1s linear infinite alternate; } &::before { width: 14px; box-shadow: -4px 4px 0; } &::after { width: 5px; top: 8px; }`export const LoadbarDoc = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledLoadbarDoc {...props} ref={ref} icon-role="loadbar-doc" /></> ) },)

CSSSVGTSX

1	@keyframes gg-doc {
2	0% { left: -16px }
3	60%,to { left: 0 }
4	}
5
6	.gg-loadbar-doc {
7	display: block;
8	position: relative;
9	box-sizing: border-box;
10	transform: scale(var(--ggs,1));
11	border: 2px solid transparent;
12	box-shadow: 0 0 0 2px;
13	border-radius: 1px;
14	width: 12px;
15	height: 14px;
16	overflow: hidden
17	}
18
19	.gg-loadbar-doc::after,
20	.gg-loadbar-doc::before {
21	content: "";
22	display: block;
23	position: absolute;
24	box-sizing: border-box;
25	height: 2px;
26	background: currentColor;
27	animation: gg-doc 1s linear infinite alternate
28	}
29
30	.gg-loadbar-doc::before {
31	width: 14px;
32	box-shadow: -4px 4px 0
33	}
34
35	.gg-loadbar-doc::after {
36	width: 5px;
37	top: 8px
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	fill-rule="evenodd"
10	clip-rule="evenodd"
11	d="M17 5H7C6.44772 5 6 5.44772 6 6V18C6 18.5523 6.44772 19 7 19H17C17.5523 19 18 18.5523 18 18V6C18 5.44772 17.5523 5 17 5ZM7 3C5.34315 3 4 4.34315 4 6V18C4 19.6569 5.34315 21 7 21H17C18.6569 21 20 19.6569 20 18V6C20 4.34315 18.6569 3 17 3H7Z"
12	fill="currentColor"
13	/>
14	<path d="M8 7H16V9H8V7Z" fill="currentColor" />
15	<path d="M8 11H16V13H8V11Z" fill="currentColor" />
16	<path d="M8 15H13V17H8V15Z" fill="currentColor" />
17	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Loadbar Doc turned into a CSS icon built by using properties such as: left, transform, border, box-shadow, border-radius, width, height, overflow, background, animation,
Fun facts, it has: 38 Lines of code at 745b & 545b after compression. Pretty marvelous 💎 for a CSS designed icon.

Loadbar Doc

Thank you!