#e8e8e8
1.dot-spinner { 2 --uib-size: 2.8rem; 3 --uib-speed: .9s; 4 --uib-color: #183153; 5 position: relative; 6 display: flex; 7 align-items: center; 8 justify-content: flex-start; 9 height: var(--uib-size); 10 width: var(--uib-size); 11} 12 13.dot-spinner__dot { 14 position: absolute; 15 top: 0; 16 left: 0; 17 display: flex; 18 align-items: center; 19 justify-content: flex-start; 20 height: 100%; 21 width: 100%; 22} 23 24.dot-spinner__dot::before { 25 content: ''; 26 height: 20%; 27 width: 20%; 28 border-radius: 50%; 29 background-color: var(--uib-color); 30 transform: scale(0); 31 opacity: 0.5; 32 animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite; 33 box-shadow: 0 0 20px rgba(18, 31, 53, 0.3); 34} 35 36.dot-spinner__dot:nth-child(2) { 37 transform: rotate(45deg); 38} 39 40.dot-spinner__dot:nth-child(2)::before { 41 animation-delay: calc(var(--uib-speed) * -0.875); 42} 43 44.dot-spinner__dot:nth-child(3) { 45 transform: rotate(90deg); 46} 47 48.dot-spinner__dot:nth-child(3)::before { 49 animation-delay: calc(var(--uib-speed) * -0.75); 50} 51 52.dot-spinner__dot:nth-child(4) { 53 transform: rotate(135deg); 54} 55 56.dot-spinner__dot:nth-child(4)::before { 57 animation-delay: calc(var(--uib-speed) * -0.625); 58} 59 60.dot-spinner__dot:nth-child(5) { 61 transform: rotate(180deg); 62} 63 64.dot-spinner__dot:nth-child(5)::before { 65 animation-delay: calc(var(--uib-speed) * -0.5); 66} 67 68.dot-spinner__dot:nth-child(6) { 69 transform: rotate(225deg); 70} 71 72.dot-spinner__dot:nth-child(6)::before { 73 animation-delay: calc(var(--uib-speed) * -0.375); 74} 75 76.dot-spinner__dot:nth-child(7) { 77 transform: rotate(270deg); 78} 79 80.dot-spinner__dot:nth-child(7)::before { 81 animation-delay: calc(var(--uib-speed) * -0.25); 82} 83 84.dot-spinner__dot:nth-child(8) { 85 transform: rotate(315deg); 86} 87 88.dot-spinner__dot:nth-child(8)::before { 89 animation-delay: calc(var(--uib-speed) * -0.125); 90} 91 92@keyframes pulse0112 { 93 0%, 94 100% { 95 transform: scale(0); 96 opacity: 0.5; 97 } 98 99 50% { 100 transform: scale(1); 101 opacity: 1; 102 } 103} 104
Comments
MIT License