CSS

【CSS】CSS + SVGローダーGooey Loader

May 4, 2017
gooey-loader

Gooey LoaderはCSS + SVGローダー。

HTML

        <div class="container">
            <div class="loader">
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
                <div class='ball'></div>
            </div>
        </div>
        <svg>
            <defs>
                <filter id="gooey">
                    <feGaussianBlur in = "SourceGraphic" stdDeviation = "8" result = "blur"/>
                    <feColorMatrix in = "blur" type = "matrix" values = "
                        1 0 0 0 0
                        0 1 0 0 0
                        0 0 1 0 0
                        0 0 0 50 -8" result="goo" />
                    <feBlend in = "SourceGraphic" in2 = 'goo'/>
                </filter>
            </defs>
        </svg>

Download