背景を透過するローディングスピナーを試してみました(SVG版)

2016-02-25

Demo

Spinner Demo

HTML

<div id="test124-image">
    <img src="0001.jpg" alt="Spinner Demo" width="1280" height="800">

    <div class="test124-spinner" data-layer="4">
        <span class="test124-spinner-svg">
            <svg width="100%" viewBox="0 0 22 22" version="1.1" height="100%">
                <svg y="1" x="7">
                    <circle r="2" cy="4" cx="4" class="test124-spinner-dot test124-spinner-dot-0">
                </svg>
                <svg y="3" x="11">
                    <circle r="2" cy="4" cx="4" class="test124-spinner-dot test124-spinner-dot-1">
                </svg>
                <svg y="7" x="13">
                    <circle r="2" cy="4" cx="4" class="test124-spinner-dot test124-spinner-dot-2">
                </svg>
                <svg y="11" x="11">
                    <circle r="2" cy="4" cx="4" class="test124-spinner-dot test124-spinner-dot-3">
                </svg>
                <svg y="13" x="7">
                    <circle r="2" cy="4" cx="4" class="test124-spinner-dot test124-spinner-dot-4">
                </svg>
                <svg y="11" x="3">
                    <circle r="2" cy="4" cx="4" class="test124-spinner-dot test124-spinner-dot-5">
                </svg>
                <svg y="7" x="1">
                    <circle r="2" cy="4" cx="4" class="test124-spinner-dot test124-spinner-dot-6">
                </svg>
                <svg y="3" x="3">
                    <circle r="2" cy="4" cx="4" class="test124-spinner-dot test124-spinner-dot-7">
                </svg>
            </svg>
        </span>
    </div>
</div>

CSS

#test124-image {
    position: relative;
}

.test124-spinner {
    position: absolute;
    width: 20%;
    height: 20%;
    top: 40%;
    left: 40%;
}

@keyframes test124-spinner-dot-fade {
    0% {
        opacity: 1;
        transform: scale(1.2, 1.2);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.9, 0.9);
    }
    100% {
        opacity: 0.1;
        transform: scale(0.85, 0.85);
    }
}

.test124-spinner-dot {
    animation: test124-spinner-dot-fade .8s ease infinite;
    fill: #fff;
    opacity: 0;
    transform-origin: 4px 4px;
}

.test124-spinner-dot-1 {
    animation-delay: 0.1s;
}

.test124-spinner-dot-2 {
    animation-delay: 0.2s;
}

.test124-spinner-dot-3 {
    animation-delay: 0.3s;
}

.test124-spinner-dot-4 {
    animation-delay: 0.4s;
}

.test124-spinner-dot-5 {
    animation-delay: 0.5s;
}

.test124-spinner-dot-6 {
    animation-delay: 0.6s;
}

.test124-spinner-dot-7 {
    animation-delay: 0.7s;
}
関連記事
Coding
2019-01-28 ポップアップメニューを利用したスクリプトを作ってみました
2016-04-04 クリップボード内のテキストをファイルに保存するスクリプトを作ってみました(UTF-8版)
2016-03-31 highlight.jsで行番号を表示してみました
2016-02-28 背景を透過するローディングスピナーを試してみました(spin.js版)
HTML/CSS
2016-03-31 highlight.jsで行番号を表示してみました
2016-02-28 背景を透過するローディングスピナーを試してみました(spin.js版)
    APPs
    APPs
    Game
    Qonoha
    Sublime Text
    Tablacus Explorer
    OBLIVION
    Oblivion
    Body, Head and Hair
    Console
    Construction Set
    Equipment
    Immersion and Realism
    Locations and Player Homes
    Magic and Enchantments
    Mercantiles
    MODs List
    NPC
    Overhauls
    Photo
    Player Homes
    Pose and Animation
    Quests
    Recommended
    Skills and Leveling
    TES4Edit
    Troubles
    User Interfaces
    Wrye Bash
    CODING
    Coding
    HTML/CSS
    JavaScript