背景を透過してもギザギザしないローディングスピナー(spin.js版)

jQueryとspin.jsを利用してスピナーを表示します。

Demo

Line

Line Spinner Demo

Dot

Line Spinner Demo

スクリプト

$(function() {
    var line = {
          lines: 11 // The number of lines to draw
        , length: 10 // The length of each line
        , width: 4 // The line thickness
        , radius: 8 // The radius of the inner circle
        , corners: 1 // Corner roundness (0..1)
        , color: '#fff' // #rgb or #rrggbb or array of colors
        , opacity: 0.25 // Opacity of the lines
        , speed: 1.5 // Rounds per second
        , trail: 60 // Afterglow percentage
        , shadow: false // Whether to render a shadow
    };
    var dot = {
          lines: 11 // The number of lines to draw
        , length: 0 // The length of each line
        , width: 8 // The line thickness
        , radius: 14 // The radius of the inner circle
        , corners: 1 // Corner roundness (0..1)
        , color: '#fff' // #rgb or #rrggbb or array of colors
        , opacity: 0.25 // Opacity of the lines
        , speed: 1.5 // Rounds per second
        , trail: 20 // Afterglow percentage
        , shadow: false // Whether to render a shadow
    };

    $("#test126-image1").spin(line);
    $("#test126-image2").spin(dot);
});

HTML

<div id="test126-image1">
    <img src="0001.jpg" alt="Line Spinner Demo" width="1280" height="800">
</div>

<div id="test126-image2">
    <img src="0001.jpg" alt="Dot Spinner Demo" width="1280" height="800">
</div>

CSS

#test126-image1,
#test126-image2 {
    position: relative;
}
関連記事
#Coding
2016-04-04 クリップボード内のテキストを新規ファイルに保存するスクリプト(UTF-8版)
2016-03-31 highlight.jsで行番号を表示
2016-02-25 背景を透過してもギザギザしないローディングスピナー(SVG版)
2015-10-19 選択アイテムのファイル名でEverything検索するスクリプト
HTML/CSS
2016-03-31 highlight.jsで行番号を表示
2016-02-25 背景を透過してもギザギザしないローディングスピナー(SVG版)
JavaScript
2016-04-04 クリップボード内のテキストを新規ファイルに保存するスクリプト(UTF-8版)
2016-03-31 highlight.jsで行番号を表示
2015-10-19 選択アイテムのファイル名でEverything検索するスクリプト
    APPs
    #APPs
    Game
    Qonoha
    Sublime Text
    Tablacus Explorer
    OBLIVION
    #Oblivion
    Architectures and Locations
    Blockhead
    Body, Head and Hair
    Combat and Crime
    Console
    CS
    Dremora IceElf
    Enhanced Economy
    Equipment
    Fundament
    Immersion and Realism
    LAME
    Mage's Sky House
    Magic and Enchantments
    MajorJims UI
    Maskar's Oblivion Overhaul
    Mercantiles
    MODs List
    My Characters
    NPC
    Photo Album
    Pose and Animation
    Quests
    Recommended
    Skills and Leveling
    TES4Edit
    Troubles
    Undies Underneath
    User Interfaces
    Wrye Bash
    CODING
    #Coding
    HTML/CSS
    JavaScript