Loading Spinner

Example of using css and simple elements to create a spinner

by jessekinsman

HTML

<div class="mask"></div>
<div class="loading"></div>

CSS

body {
    position: relative;
    padding: 0;
    margin: 0;
    height: 100%;
}
.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.15);
    z-index: 1;
    display: block;
}

.loading {
    z-index: 2;
    position: absolute;
    font-size: 100px;
    width: 1em;
    height: 1em;
    top: 50%;
    left: 30%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-width: 25px;
    border-style: solid;
    border-color: #fff transparent;
    //box-shadow: inset 0 0 0 15px #000, 0 0 0 15px #000;
    opacity: 0.4;
    -webkit-animation: mask 1800ms linear infinite;
    -moz-animation: mask 1800ms linear infinite;
    -ms-animation: mask 1800ms linear infinite;
    -o-animation: mask 1800ms linear infinite;
    animation: mask 1800ms linear infinite;
}
@-webkit-keyframes mask {
    0% {-webkit-transform: rotate(0deg); }
    100%  { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes mask {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}

@-ms-keyframes mask {
    0% {-webkit-transform: rotate(0deg); }
    100%  { -webkit-transform: rotate(360deg); }
}

@-o-keyframes mask {
    0% {-webkit-transform: rotate(0deg); }
    100%  { -webkit-transform: rotate(360deg); }
}

@keyframes mask {
    0% { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}