Loader by Gautammsharma
#e8e8e8
1.loader-container { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 height: 20em; 6} 7 8.loader { 9 position: relative; 10 width: 3em; 11 height: 3em; 12 border-radius: 50%; 13 background-color: rgb(208, 208, 208); 14 box-shadow: 0 0em 4em rgba(23, 190, 250, 0.5); 15 animation: loader-rotate 1s linear infinite; 16} 17 18.loader::before, 19.loader::after { 20 content: ""; 21 position: absolute; 22 top: 0; 23 left: 0; 24 width: 100%; 25 height: 100%; 26 border-radius: 50%; 27 border: 1em solid rgba(0, 0, 0, 0.1); 28 box-sizing: border-box; 29} 30 31.loader::before { 32 animation: loader-pulse 1s ease-out infinite; 33} 34 35.loader::after { 36 animation: loader-pulse 1s ease-out infinite 0.5s; 37} 38 39@keyframes loader-rotate { 40 0% { 41 transform: rotate(0); 42 } 43 44 100% { 45 transform: rotate(360deg); 46 } 47} 48 49@keyframes loader-pulse { 50 0% { 51 transform: scale(1); 52 opacity: 1; 53 } 54 55 50% { 56 transform: scale(1.5); 57 opacity: 0.5; 58 } 59 60 100% { 61 transform: scale(1); 62 opacity: 1; 63 } 64} 65
579 views
579 views
MIT License