Simple Spinner

index.html

<center><div id="spinner"><div></center>
<br/>
<center><span>Simple Spinner.</span></center>

Simple Spinner.markdown

Simple Spinner

A Pen by Rothien on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700);

body {background-color: #191919; font-family:'Source Code Pro', 'Droid Sans Mono'; color: #666; padding-top: 200px; text-transform: uppercase; font-size: 15px; font-weight: 600;}


     /* Keyframes */
    @-webkit-keyframes spin {
        from {-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);}
        to {-webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg);}
    }

    @keyframes spin {
        from {-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);}
        to {-webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg);}
    }

   @-webkit-keyframes spin2 {
        from {-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);}
        to {-webkit-transform: rotate(720deg); -moz-transform: rotate(720deg);}
    }

    @keyframes spin2 {
      from {-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg);}
      to {-webkit-transform: rotate(720deg); -moz-transform: rotate(720deg);}
    }



    /* Spinner */
    #spinner {
        border:2px solid #666;
        border-top:2px solid transparent;
        border-bottom:2px solid transparent;
        border-style:solid;
        position:relative;
        border-radius: 50%;
        width: 90px;
        height: 90px;
        margin-left: auto;
        margin-right: auto;
        -webkit-animation: spin 1s infinite linear;
        -moz-animation: spin 1s infinite linear;
        -o-animation: spin 1s infinite linear;
        animation: spin 1s infinite linear;
    }

    #spinner:after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        border: 2px solid #666;
        border-top: 2px solid transparent;
        border-bottom: 2px solid transparent;
        border-style: solid;
        margin: 0 auto;
        margin: 28px -17px 85px;
        border-radius: 50%;
        -webkit-animation: spin2 1s infinite linear;
        -moz-animation: spin2 1s infinite linear;
        -o-animation: spin2 1s infinite linear;
        animation: spin2 1s infinite linear;
    }