Loader by AkshatDaxini
#e8e8e8
1.main { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 scale: 1.6; 6} 7 8#pizza { 9 background-color: transparent; 10 transform-origin: center center; 11 animation: rotate 45s linear infinite; 12 -webkit-animation: rotate 45s linear infinite; 13} 14 15#slice1 { 16 animation: slice1 4s ease-in-out infinite; 17 -webkit-animation: slice1 4s ease-in-out infinite; 18} 19 20#slice2 { 21 animation: slice2 4s ease-in-out infinite; 22 animation-delay: 1s; 23 -webkit-animation: slice2 4s ease-in-out infinite; 24} 25 26#slice3 { 27 animation: slice3 4s ease-in-out infinite; 28 animation-delay: 2s; 29 -webkit-animation: slice3 4s ease-in-out infinite; 30} 31 32#slice4 { 33 animation: slice4 4s ease-in-out infinite; 34 animation-delay: 3s; 35 -webkit-animation: slice4 4s ease-in-out infinite; 36} 37 38#slice5 { 39 animation: slice5 4s ease-in-out infinite; 40 animation-delay: 4s; 41 -webkit-animation: slice5 4s ease-in-out infinite; 42} 43 44#slice6 { 45 animation: slice6 4s ease-in-out infinite; 46 animation-delay: 5s; 47 -webkit-animation: slice6 4s ease-in-out infinite; 48} 49 50@keyframes rotate { 51 0% { 52 transform: rotate(0deg); 53 } 54 100% { 55 transform: rotate(360deg); 56 -webkit-transform: rotate(360deg); 57 -moz-transform: rotate(360deg); 58 -ms-transform: rotate(360deg); 59 -o-transform: rotate(360deg); 60 } 61} 62 63@keyframes slice1 { 64 0%, 65 100% { 66 transform: translate(0, 0); 67 -webkit-transform: translate(0, 0); 68 -moz-transform: translate(0, 0); 69 -ms-transform: translate(0, 0); 70 -o-transform: translate(0, 0); 71 } 72 50% { 73 transform: translate(5%, 5%); 74 -webkit-transform: translate(5%, 5%); 75 -moz-transform: translate(5%, 5%); 76 -ms-transform: translate(5%, 5%); 77 -o-transform: translate(5%, 5%); 78 } 79} 80 81@keyframes slice2 { 82 0%, 83 100% { 84 transform: translate(0, 0); 85 -webkit-transform: translate(0, 0); 86 -moz-transform: translate(0, 0); 87 -ms-transform: translate(0, 0); 88 -o-transform: translate(0, 0); 89 } 90 50% { 91 transform: translate(0%, 7%); 92 -webkit-transform: translate(0%, 7%); 93 -moz-transform: translate(0%, 7%); 94 -ms-transform: translate(0%, 7%); 95 -o-transform: translate(0%, 7%); 96 } 97} 98 99@keyframes slice3 { 100 0%, 101 100% { 102 transform: translate(0, 0); 103 -webkit-transform: translate(0, 0); 104 -moz-transform: translate(0, 0); 105 -ms-transform: translate(0, 0); 106 -o-transform: translate(0, 0); 107 } 108 50% { 109 transform: translate(-5%, 5%); 110 -webkit-transform: translate(-5%, 5%); 111 -moz-transform: translate(-5%, 5%); 112 -ms-transform: translate(-5%, 5%); 113 -o-transform: translate(-5%, 5%); 114 } 115} 116 117@keyframes slice4 { 118 0%, 119 100% { 120 transform: translate(0, 0); 121 -webkit-transform: translate(0, 0); 122 -moz-transform: translate(0, 0); 123 -ms-transform: translate(0, 0); 124 -o-transform: translate(0, 0); 125 } 126 50% { 127 transform: translate(-5%, 0%); 128 -webkit-transform: translate(-5%, 0%); 129 -moz-transform: translate(-5%, 0%); 130 -ms-transform: translate(-5%, 0%); 131 -o-transform: translate(-5%, 0%); 132 } 133} 134 135@keyframes slice5 { 136 0%, 137 100% { 138 transform: translate(0, 0); 139 -webkit-transform: translate(0, 0); 140 -moz-transform: translate(0, 0); 141 -ms-transform: translate(0, 0); 142 -o-transform: translate(0, 0); 143 } 144 50% { 145 transform: translate(0%, -3%); 146 -webkit-transform: translate(0%, -3%); 147 -moz-transform: translate(0%, -3%); 148 -ms-transform: translate(0%, -3%); 149 -o-transform: translate(0%, -3%); 150 } 151} 152 153@keyframes slice6 { 154 0%, 155 100% { 156 transform: translate(0, 0); 157 -webkit-transform: translate(0, 0); 158 -moz-transform: translate(0, 0); 159 -ms-transform: translate(0, 0); 160 -o-transform: translate(0, 0); 161 } 162 50% { 163 transform: translate(5%, 0%); 164 -webkit-transform: translate(5%, 0%); 165 -moz-transform: translate(5%, 0%); 166 -ms-transform: translate(5%, 0%); 167 -o-transform: translate(5%, 0%); 168 } 169} 170
318 views
318 views
MIT License