Skip to content

Instantly share code, notes, and snippets.

@docherty

docherty/css-spinner.html

Last active October 20, 2017 16:52
Show Gist options
  • Save docherty/d910593f3b07469cecaab1a73eb3972d to your computer and use it in GitHub Desktop.
Save docherty/d910593f3b07469cecaab1a73eb3972d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. docherty revised this gist Oct 20, 2017. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions css-spinner.html
    View file
    Original file line number Diff line number Diff line change
    @@ -40,18 +40,18 @@
    content: '';
    display: block;
    position: absolute;
    top: -2px;
    bottom: -2px;
    top: -1px;
    bottom: -1px;
    }

    .myspan:before {
    left: -2px;
    left: -1px;
    right: 50%;
    border-radius: 100px 0 0 100px;
    background-image: linear-gradient( to top, #000, rgba(255,255,255,0.2) );
    }
    .myspan:after {
    right: -2px;
    right: -1px;
    left: 50%;
    border-radius: 0 100px 100px 0;
    background-image: linear-gradient(to top,#fff,rgba(255,255,255,0.2));
  2. docherty created this gist Oct 20, 2017.
    68 changes: 68 additions & 0 deletions css-spinner.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>CSS spinner</title>
    <style>
    .wrapper{
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    }
    .spinner{
    display: inline-block;
    position: relative;
    width: 100px;
    height: 100px;
    vertical-align: middle;
    border-radius: 100%;

    background-color: #000;
    /*background-image: url("https://s3-us-west-2.amazonaws.com/svgporn.com/logos/css-3_official.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;*/
    }

    .myspan {
    z-index: -1;
    display: block;
    position: relative;
    width: inherit;
    height: inherit;
    animation: spin 1.75s linear infinite;
    }

    .myspan:before, .myspan:after{
    content: '';
    display: block;
    position: absolute;
    top: -2px;
    bottom: -2px;
    }

    .myspan:before {
    left: -2px;
    right: 50%;
    border-radius: 100px 0 0 100px;
    background-image: linear-gradient( to top, #000, rgba(255,255,255,0.2) );
    }
    .myspan:after {
    right: -2px;
    left: 50%;
    border-radius: 0 100px 100px 0;
    background-image: linear-gradient(to top,#fff,rgba(255,255,255,0.2));
    }

    @keyframes spin { to { transform:rotate(360deg); } }
    </style>
    </head>
    <body class="wrapper">
    <div class="spinner">
    <span class="myspan"></span>
    </div>
    </body>
    </html>