Loader by Mhyar-nsi
#e8e8e8
1.loader { 2 display: inline-block; 3 vertical-align: middle; 4 position: relative; 5 margin: 10px; 6} 7 8@keyframes loader-bubbles { 9 0% { 10 box-shadow: 0 -10px #3b82f6, 11 3px 0 #3b82f6, 12 5px 0 #3b82f6; 13 } 14 15 30% { 16 box-shadow: 3px -20px rgba(239,223,255,0), 17 5px -10px #3b82f6, 18 5px 0 #3b82f6; 19 } 20 21 60% { 22 box-shadow: 3px 0 rgba(239,223,255,0), 23 4px -20px rgba(239,223,255,0), 24 3px -10px #3b82f6; 25 } 26 27 61% { 28 box-shadow: 3px 0 #3b82f6, 29 4px -20px rgba(239,223,255,0), 30 3px -10px #3b82f6; 31 } 32 33 100% { 34 box-shadow: 0 -10px #3b82f6, 35 4px -20px rgba(239,223,255,0), 36 5px -20px rgba(239,223,255,0); 37 } 38} 39 40.loader { 41 width: 10px; 42 height: 20px; 43 margin-left: 20px; 44 margin-right: 20px; 45 background: #3b82f6; 46} 47 48.loader:before, 49.loader:after { 50 content: ''; 51 position: absolute; 52} 53 54.loader:before { 55 top: -8px; 56 left: -13px; 57 width: 0; 58 height: 0; 59 border: 18px solid transparent; 60 border-bottom: 20px solid #3b82f6; 61 border-radius: 3px; 62} 63 64.loader:after { 65 top: 0; 66 left: 0; 67 width: 4px; 68 height: 4px; 69 background: #3b82f6; 70 border-radius: 50%; 71 animation: loader-bubbles 1s linear infinite forwards; 72}
872 views
872 views
MIT License