Loader by G4b413l
#e8e8e8
1.pinwheel { 2 --uib-size: 45px; 3 --uib-speed: 0.8s; 4 --uib-color: #312f2b; 5 --uib-line-weight: 4px; 6 position: relative; 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 height: var(--uib-size); 11 width: var(--uib-size); 12} 13 14.pinwheel__line { 15 position: absolute; 16 top: calc(50% - var(--uib-line-weight) / 2); 17 left: 0; 18 height: var(--uib-line-weight); 19 width: 100%; 20 border-radius: calc(var(--uib-line-weight) / 2); 21 background-color: var(--uib-color); 22 animation: rotate81232 var(--uib-speed) ease-in-out infinite; 23} 24 25.pinwheel__line:nth-child(2) { 26 animation-delay: calc(var(--uib-speed) * 0.075); 27 opacity: 0.8; 28} 29 30.pinwheel__line:nth-child(3) { 31 animation-delay: calc(var(--uib-speed) * 0.15); 32 opacity: 0.6; 33} 34 35.pinwheel__line:nth-child(4) { 36 animation-delay: calc(var(--uib-speed) * 0.225); 37 opacity: 0.4; 38} 39 40.pinwheel__line:nth-child(5) { 41 animation-delay: calc(var(--uib-speed) * 0.3); 42 opacity: 0.2; 43} 44 45.pinwheel__line:nth-child(6) { 46 animation-delay: calc(var(--uib-speed) * 0.375); 47 opacity: 0.1; 48} 49 50@keyframes rotate81232 { 51 0% { 52 transform: rotate(0deg); 53 } 54 55 100% { 56 transform: rotate(180deg); 57 } 58} 59
1K views
1K views
MIT License