Loadbar Doc
3K Views
49 Downloads - 8 API calls
38 Lines - 745 Bytes
Apr 23, 2020 signs interface
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 5 H7 C6.44772 5 6 5.44772 6 6 V18 C6 18.5523 6.44772 19 7 19 H17 C17.5523 19 18 18.5523 18 18 V6 C18 5.44772 17.5523 5 17 5 ZM7 3 C5.34315 3 4 4.34315 4 6 V18 C4 19.6569 5.34315 21 7 21 H17 C18.6569 21 20 19.6569 20 18 V6 C20 4.34315 18.6569 3 17 3 H7 Z" 12 fill="currentColor" 13 /> 14 <path d="M8 7 H16 V9 H8 V7 Z" fill="currentColor" /> 15 <path d="M8 11 H16 V13 H8 V11 Z" fill="currentColor" /> 16 <path d="M8 15 H13 V17 H8 V15 Z" 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
Loadbar Doc developed into a magic CSS icon built by practicing attributes as follows: left, transform, border, box-shadow, border-radius, width, height, overflow, background, animation, Fun facts, it has: 38 Lines of code at 745b & 545b after compiling. Actually wonderful 🤗 for a icon designed by code.