Loadbar Alt
3K Views
55 Downloads - 12 API calls
36 Lines - 690 Bytes
Apr 23, 2020 signs interface
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
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 😲 .