Loader by Shoh2008
#212121
1.loader { 2 position: relative; 3 display: flex; 4 align-items: center; 5 justify-content: center; 6 width: 100%; 7 max-width: 6rem; 8 margin-top: 3rem; 9 margin-bottom: 3rem; 10} 11 12.loader:before, 13 .loader:after { 14 content: ""; 15 position: absolute; 16 border-radius: 50%; 17 animation: pulsOut 1.8s ease-in-out infinite; 18 filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75)); 19} 20 21.loader:before { 22 width: 100%; 23 padding-bottom: 100%; 24 box-shadow: inset 0 0 0 1rem #fff; 25 animation-name: pulsIn; 26} 27 28.loader:after { 29 width: calc(100% - 2rem); 30 padding-bottom: calc(100% - 2rem); 31 box-shadow: 0 0 0 0 #fff; 32} 33 34@keyframes pulsIn { 35 0% { 36 box-shadow: inset 0 0 0 1rem #fff; 37 opacity: 1; 38 } 39 40 50%, 100% { 41 box-shadow: inset 0 0 0 0 #fff; 42 opacity: 0; 43 } 44} 45 46@keyframes pulsOut { 47 0%, 50% { 48 box-shadow: 0 0 0 0 #fff; 49 opacity: 0; 50 } 51 52 100% { 53 box-shadow: 0 0 0 1rem #fff; 54 opacity: 1; 55 } 56} 57
1K views
1K views
MIT License