Skip to content

Instantly share code, notes, and snippets.

@xieranmaya

xieranmaya/loading-anim.css

Created June 4, 2015 09:19
Download ZIP

Revisions

  1. xieranmaya created this gist Jun 4, 2015.
    30 changes: 30 additions & 0 deletions loading-anim.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    .loading-anim {
    font-size: 64px;
    display: inline-block;
    }
    .loading-anim:after {
    content: "\2026";
    font-family: serif;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: loading 1.2s infinite;
    }

    @keyframes loading-anim {
    0%, 25% {
    width: 0;
    }

    26%, 50% {
    width: 0.333em;
    }

    51%, 75% {
    width: 0.666em;
    }

    76%, 100% {
    width: 1em;
    }
    }