Loader by Sourcesketch
#e8e8e8
1.flower-loader { 2 overflow: hidden; 3 position: relative; 4 text-indent: -9999px; 5 display: inline-block; 6 width: 16px; 7 height: 16px; 8 background: #e96; 9 border-radius: 100%; 10 -moz-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, 11 #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px; 12 -webkit-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, 13 #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px; 14 box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px, 15 #485 12px 12px 0 4px, #485 -12px 12px 0 4px; 16 -moz-animation: flower-loader 5s infinite ease-in-out; 17 -webkit-animation: flower-loader 5s infinite ease-in-out; 18 animation: flower-loader 5s infinite ease-in-out; 19 -moz-transform-origin: 50% 50%; 20 -ms-transform-origin: 50% 50%; 21 -webkit-transform-origin: 50% 50%; 22 transform-origin: 50% 50%; 23} 24 25@-moz-keyframes flower-loader { 26 0% { 27 -moz-transform: rotate(0deg); 28 transform: rotate(0deg); 29 -moz-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, 30 #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px; 31 box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px, 32 #485 12px 12px 0 4px, #485 -12px 12px 0 4px; 33 } 34 50% { 35 -moz-transform: rotate(1080deg); 36 transform: rotate(1080deg); 37 -moz-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, 38 #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px; 39 box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, #485 -12px 12px 0 4px, 40 #485 -12px -12px 0 4px, #485 12px -12px 0 4px; 41 } 42} 43@-webkit-keyframes flower-loader { 44 0% { 45 -webkit-transform: rotate(0deg); 46 transform: rotate(0deg); 47 -webkit-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, 48 #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px; 49 box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px, 50 #485 12px 12px 0 4px, #485 -12px 12px 0 4px; 51 } 52 50% { 53 -webkit-transform: rotate(1080deg); 54 transform: rotate(1080deg); 55 -webkit-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, 56 #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px; 57 box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, #485 -12px 12px 0 4px, 58 #485 -12px -12px 0 4px, #485 12px -12px 0 4px; 59 } 60} 61@keyframes flower-loader { 62 0% { 63 -moz-transform: rotate(0deg); 64 -ms-transform: rotate(0deg); 65 -webkit-transform: rotate(0deg); 66 transform: rotate(0deg); 67 -moz-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, 68 #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px; 69 -webkit-box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, 70 #485 12px -12px 0 4px, #485 12px 12px 0 4px, #485 -12px 12px 0 4px; 71 box-shadow: white 0 0 15px 0, #485 -12px -12px 0 4px, #485 12px -12px 0 4px, 72 #485 12px 12px 0 4px, #485 -12px 12px 0 4px; 73 } 74 50% { 75 -moz-transform: rotate(1080deg); 76 -ms-transform: rotate(1080deg); 77 -webkit-transform: rotate(1080deg); 78 transform: rotate(1080deg); 79 -moz-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, 80 #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px; 81 -webkit-box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, 82 #485 -12px 12px 0 4px, #485 -12px -12px 0 4px, #485 12px -12px 0 4px; 83 box-shadow: white 0 0 15px 0, #485 12px 12px 0 4px, #485 -12px 12px 0 4px, 84 #485 -12px -12px 0 4px, #485 12px -12px 0 4px; 85 } 86} 87
260 views
260 views
MIT License