CSS spinner/loading icon does not display on Safari/iPhone - ios

Question

I am developing a mobile web application, and need to incorporate a loading spinner.
I have found one from a helpful website, and works on IE, FF and Chrome, but for some reason does not work on Safari on my iPhone 4.
HTML:
<div class="overlay">
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS:
.overlay {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
.loader {
width: 0px;
height: 0px;
margin: 50vh auto;
/*position: relative;*/
position: absolute;
left: 50%;
top: -100px;
}
.loader > div {
width: 6px;
height: 20px;
position: absolute;
left: -10px;
bottom: 15px;
border-radius: 5px;
transform-origin: 10px 35px;
transform: rotate(0deg);
animation: loader 0.8s infinite;
}
.loader > div:nth-child(2) {
transform: rotate(45deg);
animation-delay: 0.1s;
}
.loader > div:nth-child(3) {
transform: rotate(90deg);
animation-delay: 0.2s;
}
.loader > div:nth-child(4) {
transform: rotate(135deg);
animation-delay: 0.3s;
}
.loader > div:nth-child(5) {
transform: rotate(180deg);
animation-delay: 0.4s;
}
.loader > div:nth-child(6) {
transform: rotate(225deg);
animation-delay: 0.5s;
}
.loader > div:nth-child(7) {
transform: rotate(270deg);
animation-delay: 0.6s;
}
.loader > div:nth-child(8) {
transform: rotate(315deg);
animation-delay: 0.7s;
}
#keyframes loader {
0% {
background: transparent;
left: -10px;
transform-origin: 10px 35px;
}
30% {
background: white;
}
100% {
background: transparent;
left: 10px;
transform-origin: -10px 35px;
}
}
Plunker: http://plnkr.co/edit/ztBL6TN03yx41t4PRZMM?p=preview

Answer 1

Solution required prefixes, e.g:
.loader > div {
width: 6px;
height: 20px;
position: absolute;
left: -10px;
bottom: 15px;
border-radius: 5px;
-webkit-transform-origin: 10px 35px;
-moz-transform-origin: 10px 35px;
-ms-transform-origin: 10px 35px;
-o-transform-origin: 10px 35px;
transform-origin: 10px 35px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation: loader 0.8s infinite;
-moz-animation: loader 0.8s infinite;
animation: loader 0.8s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes loader {
0% {
background: transparent;
left: -10px;
-webkit-transform-origin: 10px 35px;
-moz-transform-origin: 10px 35px;
transform-origin: 10px 35px;
}
30% {
background: white;
}
100% {
background: transparent;
left: 10px;
-webkit-transform-origin: -10px 35px;
-moz-transform-origin: -10px 35px;
transform-origin: -10px 35px;
}
}
Plunkr: plnkr.co/edit/ztBL6TN03yx41t4PRZMM?p=preview