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