CSS Loader/Spinner

index.php

<div class="loader"></div>

styles.css

.loader {
    height: 30px;
    width: 30px;
    border: 2px solid rgba(0, 0, 0, 0.7);
    border-top-color: rgba(0, 0, 0, 0.08);
    border-left-color: rgba(0, 0, 0, 0.08);
    background-color: rgba(0, 0, 0, 0);
    border-radius: 150px;
    display: inline-block;
    vertical-align: middle;
    -webkit-animation: loader-spin 1s infinite linear;
    -moz-animation: loader-spin 1s infinite linear;
    -ms-animation: loader-spin 1s infinite linear;
    -o-animation: loader-spin 1s infinite linear;
    animation: loader-spin 1s infinite linear;
}
@-webkit-keyframes loader-spin {
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}
@-moz-keyframes loader-spin {
    0% {
        -moz-transform:rotate(0deg);
    }
    100% {
        -moz-transform:rotate(360deg);
    }
}
@-ms-keyframes loader-spin {
    0% {
        -ms-transform:rotate(0deg);
    }
    100% {
        -ms-transform:rotate(360deg);
    }
}
@-o-keyframes loader-spin {
    0% {
        -o-transform:rotate(0deg);
    }
    100% {
        -o-transform:rotate(360deg);
    }
}
@keyframes loader-spin {
    0% {
        transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
    }
}