#e8e8e8
1.spinner { 2 font-size: 28px; 3 position: relative; 4 display: inline-block; 5 width: 1em; 6 height: 1em; 7} 8 9.spinner.center { 10 position: absolute; 11 left: 0; 12 right: 0; 13 top: 0; 14 bottom: 0; 15 margin: auto; 16} 17 18.spinner .spinner-blade { 19 position: absolute; 20 left: 0.4629em; 21 bottom: 0; 22 width: 0.074em; 23 height: 0.2777em; 24 border-radius: 0.0555em; 25 background-color: transparent; 26 -webkit-transform-origin: center -0.2222em; 27 -ms-transform-origin: center -0.2222em; 28 transform-origin: center -0.2222em; 29 animation: spinner-fade9234 1s infinite linear; 30} 31 32.spinner .spinner-blade:nth-child(1) { 33 -webkit-animation-delay: 0s; 34 animation-delay: 0s; 35 -webkit-transform: rotate(0deg); 36 -ms-transform: rotate(0deg); 37 transform: rotate(0deg); 38} 39 40.spinner .spinner-blade:nth-child(2) { 41 -webkit-animation-delay: 0.083s; 42 animation-delay: 0.083s; 43 -webkit-transform: rotate(30deg); 44 -ms-transform: rotate(30deg); 45 transform: rotate(30deg); 46} 47 48.spinner .spinner-blade:nth-child(3) { 49 -webkit-animation-delay: 0.166s; 50 animation-delay: 0.166s; 51 -webkit-transform: rotate(60deg); 52 -ms-transform: rotate(60deg); 53 transform: rotate(60deg); 54} 55 56.spinner .spinner-blade:nth-child(4) { 57 -webkit-animation-delay: 0.249s; 58 animation-delay: 0.249s; 59 -webkit-transform: rotate(90deg); 60 -ms-transform: rotate(90deg); 61 transform: rotate(90deg); 62} 63 64.spinner .spinner-blade:nth-child(5) { 65 -webkit-animation-delay: 0.332s; 66 animation-delay: 0.332s; 67 -webkit-transform: rotate(120deg); 68 -ms-transform: rotate(120deg); 69 transform: rotate(120deg); 70} 71 72.spinner .spinner-blade:nth-child(6) { 73 -webkit-animation-delay: 0.415s; 74 animation-delay: 0.415s; 75 -webkit-transform: rotate(150deg); 76 -ms-transform: rotate(150deg); 77 transform: rotate(150deg); 78} 79 80.spinner .spinner-blade:nth-child(7) { 81 -webkit-animation-delay: 0.498s; 82 animation-delay: 0.498s; 83 -webkit-transform: rotate(180deg); 84 -ms-transform: rotate(180deg); 85 transform: rotate(180deg); 86} 87 88.spinner .spinner-blade:nth-child(8) { 89 -webkit-animation-delay: 0.581s; 90 animation-delay: 0.581s; 91 -webkit-transform: rotate(210deg); 92 -ms-transform: rotate(210deg); 93 transform: rotate(210deg); 94} 95 96.spinner .spinner-blade:nth-child(9) { 97 -webkit-animation-delay: 0.664s; 98 animation-delay: 0.664s; 99 -webkit-transform: rotate(240deg); 100 -ms-transform: rotate(240deg); 101 transform: rotate(240deg); 102} 103 104.spinner .spinner-blade:nth-child(10) { 105 -webkit-animation-delay: 0.747s; 106 animation-delay: 0.747s; 107 -webkit-transform: rotate(270deg); 108 -ms-transform: rotate(270deg); 109 transform: rotate(270deg); 110} 111 112.spinner .spinner-blade:nth-child(11) { 113 -webkit-animation-delay: 0.83s; 114 animation-delay: 0.83s; 115 -webkit-transform: rotate(300deg); 116 -ms-transform: rotate(300deg); 117 transform: rotate(300deg); 118} 119 120.spinner .spinner-blade:nth-child(12) { 121 -webkit-animation-delay: 0.913s; 122 animation-delay: 0.913s; 123 -webkit-transform: rotate(330deg); 124 -ms-transform: rotate(330deg); 125 transform: rotate(330deg); 126} 127 128@keyframes spinner-fade9234 { 129 0% { 130 background-color: #69717d; 131 } 132 133 100% { 134 background-color: transparent; 135 } 136}
6.3K views
6.3K views
Comments
MIT License