Timer interface time
1 .gg-timer,
2 .gg-timer::before { 3 border: 2px solid;
4 width: 18px ;
5 height: 18px ;
6 border-radius: 40px 7 } 8 9 .gg-timer { 10 background:
11 linear-gradient(to left,
12 currentColor 10px ,transparent 0 )
13 no-repeat 6px -2px /2px 6px ;
14 box-sizing: border-box;
15 transform: scale(var(--ggs,1 ));
16 position: relative;
17 display: block;
18 border-top-color: transparent
19 } 20 21 .gg-timer::after ,
22 .gg-timer::before { 23 content: "";
24 display: block;
25 box-sizing: border-box;
26 position: absolute
27 } 28 29 .gg-timer::before { 30 border-right-color: transparent;
31 border-left-color: transparent;
32 border-bottom-color: transparent;
33 right: -2px ;
34 top: -2px ;
35 transform: rotate(45deg )
36 } 37 38 .gg-timer::after { 39 width: 2px ;
40 height: 6px ;
41 background: currentColor;
42 transform: rotate(-50deg );
43 left: 4px ;
44 bottom: 5px ;
45 border-radius: 100px 46 }
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 d="M13 5.07089 C16.3923 5.55612 19 8.47353 19 12 C19 15.866 15.866 19 12 19 C8.13401 19 5 15.866 5 12 C5 9.96159 5.87128 8.12669 7.26175 6.84738 L5.84658 5.43221 C4.09461 7.0743 3 9.40932 3 12 C3 16.9706 7.02944 21 12 21 C16.9706 21 21 16.9706 21 12 C21 7.02944 16.9706 3 12 3 C11.662 3 11.3283 3.01863 11 3.05493 V9.08551 H13 V5.07089 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M7.70711 8.70708 C7.31658 9.0976 7.31658 9.73077 7.70711 10.1213 L10.5355 12.9497 C10.9261 13.3402 11.5592 13.3402 11.9497 12.9497 C12.3403 12.5592 12.3403 11.926 11.9497 11.5355 L9.12132 8.70708 C8.7308 8.31655 8.09763 8.31655 7.70711 8.70708 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledTimer = styled.i` 5 &, 6 &::before { 7 border: 2px solid;8 width: 18px ;9 height: 18px ;10 border-radius: 40px ;11 } 12 & { 13 background: linear-gradient(to left, currentColor 10px , transparent 0 ) no-repeat 6px -2px /2px 6px ;14 box-sizing: border-box;15 transform: scale(var(--ggs, 1 ));16 position: relative;17 display: block;18 border-top-color: transparent;19 } 20 &::after , 21 &::before { 22 content: '';23 display: block;24 box-sizing: border-box;25 position: absolute;26 } 27 &::before { 28 border-right-color: transparent;29 border-left-color: transparent;30 border-bottom-color: transparent;31 right: -2px ;32 top: -2px ;33 transform: rotate(45deg );34 } 35 &::after { 36 width: 2px ;37 height: 6px ;38 background: currentColor;39 transform: rotate(-50deg );40 left: 4px ;41 bottom: 5px ;42 border-radius: 100px ;43 } 44 ` 45 46 export const Timer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 47 (props, ref) => { 48 return ( 49 <> 50 <StyledTimer { ...props} ref={ ref} icon-role="timer" /> 51 </> 52 ) 53 } , 54 ) 55
Timer turned into a wonderful 100% CSS icon built by using properties like: .gg-timer, width, height, border-radius, transform, border-top-color, border-left-color, border-bottom-color, background,
