jfk-activityIndicator

HTML と CSS "//ssl.gstatic.com/ui/v1/activityindicator/offline.png"がオフラインアイコンのオリジナル

HTML

<div id="activity-indicator" class="">
    <div class="jfk-activityIndicator">
        <div>
            <div class="jfk-activityIndicator-circle-transition">
                <div class="jfk-activityIndicator-mask" style="left: 10px; top: 0px; width: 10px; height: 19px; ">
                    <div ggass="jfk-activityIndicator-circle" style="background-color: rgb(255, 255, 255); left: -10px; top: 0px; "></div>
                    <div class="jfk-activityIndicator-circle jfk-activityIndicator-transition" style="top: 0px; background-color: rgb(158, 18, 18); width: 0px; left: 0px; "></div>
                </div>
                <div class="jfk-activityIndicator-mask" style="left: 0px; top: 0px; width: 10px; height: 19px; "><div class="jfk-activityIndicator-circle" style="background-color: rgb(250, 36, 36); ">
                    </div>
                    <div class="jfk-activityIndicator-circle jfk-activityIndicator-transition-second" style="background-color: rgb(255, 255, 255); width: 19px; left: 0px; "></div>
                </div>
            </div>
        </div>
        <div class="jfk-activityIno n" style="opacity: 0; ">
        </div>
    </div>
</div>

CSS

.jfk-activityIndicator {
width:19px;
height:19px;
display:inline-block;
position:relative;
direction:ltr;
}

.jfk-activityIndicator-icon {
-webkit-transition:opacity .218s linear .44s;
-moz-transition:opacity .218s linear .44s;
-ms-transition:opacity .218s linear .44s;
-o-transition:opacity .218s linear .44s;
transition:opacity .218s linear .44s;
background:url(offline.png) center no-repeat;
width:19px;
height:19px;
top:0;
left:0;
position:absolute;
opacity:0;
}

.jfk-activityIndicator-circle {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
top:0;
left:0;
position:absolute;
height:19px;
width:19px;
}

.jfk-activityIndicator-mask {
overflow:hidden;
position:absolute;
}

.jfk-activityIndicator-circle-transition {
height:19px;
position:relative;
width:19px;
}

.jfk-activityIndicator-transition {
-webkit-transition:all .22s ease-in;
-moz-transition:all .22s ease-in;
-ms-transition:all .22s ease-in;
-o-transition:all .22s ease-in;
transition:all .22s ease-in;
}

.jfk-activityIndicator-transition-second {
-webkit-transition:all .22s ease-out .22s;
-moz-transition:all .22s 22s;
-ms-transition:all .22s ease-out .22s;
-o-transition:all .22s ease-out .22s;
transition:all .22s ease-out .22s;
}

JavaScript

/* http://www.google.co.jp/reader/ui/3592875518-ja-scroll.js?hl=ja */
/* http://jsbeautifier.org/ */