CSS crescent moon

CSS crescent moon created with html and css. Browser support is good, but hasn't been tested.

by William Green

HTML

<div id="loader">
    <div id="spinnerContainer">
        <div id="bigCircle"></div>
        <div id="littleCircle"></div>
    </div>
    <div id="stars"></div>
</div>

CSS

#loader {
    background-color:#333;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:block;
}
#stars {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:transparent;
    z-index:1;
}
.star {
    background-color:#fff;
    height:10px;
    width:10px;
    display:block;
    position:absolute;
    z-index:50;
    border-radius:50%;
    -o-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
}
#stars .star:nth-child(4n+0) {
    -o-animation: star 8s ease infinite;
    -moz-animation: star 8s ease infinite;
    -webkit-animation: star 8s ease infinite;
    -ms-animation: star 8s ease infinite;
    animation: star 8s ease infinite;
}
@-ms-keyframes moon {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
        box-shadow:2px 2px 3px #fff;
    }
    90% {
        opacity:0;
    }
}
@-moz-keyframes moon {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
        box-shadow:2px 2px 3px #fff;
    }
    90% {
        opacity:0;
    }
}
@-o-keyframes moon {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
        box-shadow:2px 2px 3px #fff;
    }
    90% {
        opacity:0;
    }
}
@-webkit-keyframes moon {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
        box-shadow:2px 2px 3px #fff;
    }
    90% {
        opacity:0;
    }
}
@keyframes star {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
        box-shadow:2px 2px 3px #fff;
    }
    100% {
        opacity:0;
    }
}
#spinnerContainer {
    margin:auto;
    z-index:100;
    top:calc(50% - 50px);
    position:absolute;
    height:100px;
    width:100%;
}
#bigCircle {
    width:100px;
    height:100px;
    background-color:#fff;
    border-radius:50%;
    margin:auto;
}
#littleCircle {
    width:95px;
    height:95px;
    border-radius:50%;
    display:block;
   ...

JavaScript

window.onload = function () {
    var stars = document.getElementById('stars');
    var maxWidth = window.innerWidth - 10;
    var maxHeight = window.innerHeight - 10;
    for (var i = 0; i != 40; i++) {
        stars.innerHTML += '<div class="star"></div>';
        var currentStar = stars.children[i];
        var randomTop = Math.floor(Math.random() * maxHeight);
        var randomLeft = Math.floor(Math.random() * maxWidth);
        currentStar.style.top = randomTop + 'px';
        currentStar.style.left = randomLeft + 'px';
    }
};

window.onresize = function () {
    var stars = document.getElementById('stars');
    var maxWidth = window.innerWidth - 10;
    var maxHeight = window.innerHeight - 10;
    for (var i = 0; i != 40; i++) {
        stars.innerHTML += '<div class="star"></div>';
        var currentStar = stars.children[i];
        var randomTop = Math.floor(Math.random() * maxHeight);
        var randomLeft = Math.floor(Math.random() * maxWidth);
        currentStar.style.top = randomTop + 'px';
        currentStar.style.left = randomLeft + 'px';
    }
};