Loader by boryanakrasteva
#212121
1@-webkit-keyframes follow-the-leader { 2 0% { 3 -webkit-transform: rotate(0deg) translateY(-200%); 4 transform: rotate(0deg) translateY(-200%); 5 } 6 7 60%, 8 100% { 9 -webkit-transform: rotate(360deg) translateY(-200%); 10 transform: rotate(360deg) translateY(-200%); 11 } 12} 13 14@keyframes follow-the-leader { 15 0% { 16 -webkit-transform: rotate(0deg) translateY(-200%); 17 transform: rotate(0deg) translateY(-200%); 18 } 19 20 60%, 21 100% { 22 -webkit-transform: rotate(360deg) translateY(-200%); 23 transform: rotate(360deg) translateY(-200%); 24 } 25} 26 27.follow-the-leader-line { 28 height: 14px; 29 position: relative; 30 width: 14px; 31} 32 33.follow-the-leader-line div { 34 -webkit-animation: follow-the-leader 1.25s infinite backwards; 35 animation: follow-the-leader 1.25s infinite backwards; 36 background-color: #ffffff; 37 border-radius: 100%; 38 height: 100%; 39 width: 100%; 40} 41 42.follow-the-leader-line div:nth-child(1) { 43 -webkit-animation-delay: 0.15s; 44 animation-delay: 0.15s; 45 background-color: rgba(255, 255, 255, 0.9); 46} 47 48.follow-the-leader-line div:nth-child(2) { 49 -webkit-animation-delay: 0.3s; 50 animation-delay: 0.3s; 51 background-color: rgba(255, 255, 255, 0.8); 52} 53 54.follow-the-leader-line div:nth-child(3) { 55 -webkit-animation-delay: 0.45s; 56 animation-delay: 0.45s; 57 background-color: rgba(255, 255, 255, 0.7); 58} 59 60.follow-the-leader-line div:nth-child(4) { 61 -webkit-animation-delay: 0.6s; 62 animation-delay: 0.6s; 63 background-color: rgba(255, 255, 255, 0.6); 64} 65 66.follow-the-leader-line div:nth-child(5) { 67 -webkit-animation-delay: 0.75s; 68 animation-delay: 0.75s; 69 background-color: rgba(255, 255, 255, 0.5); 70}
809 views
809 views
MIT License