CSS loading animations made by single element

CSS 2/3, Three Dots
Snippet by Anon
1305 0
HTML
<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-elastic"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-pulse"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-flashing"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-collision"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-revolution"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-carousel"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-typing"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-windmill"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-bricks"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-floating"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-fire"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-spin"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-falling"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-stretching"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-3">
            <div class="snippet">
                <div class="stage filter-contrast">
                    <div class="dot-gathering"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage filter-contrast">
                    <div class="dot-hourglass"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage filter-contrast">
                    <div class="dot-overtaking"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage filter-contrast">
                    <div class="dot-shuttle"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-bouncing"></div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="snippet">
                <div class="stage">
                    <div class="dot-rolling"></div>
                </div>
            </div>
        </div>

    </div>
</div>
CSS
{ } JS
Preview