html_css:css_loading_animation [ともやん・どっと・ねっと]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== CSS ローディングアニメーション ======

===== CSS Load.net =====
[[https://icons8.com/cssload|CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery]]\\
\\
[[https://icons8.com/cssload/en/spinners|Spinners]] の circular で生成する。\\
<html>
    <script>
        jQuery(function() {
            var style = '<link rel="stylesheet" href="/_media/html_css/circular_g.css">';
            jQuery('head link:last').after(style);
        });
    </script>
    <div id="circularG">
        <div id="circularG_1" class="circularG"></div>
        <div id="circularG_2" class="circularG"></div>
        <div id="circularG_3" class="circularG"></div>
        <div id="circularG_4" class="circularG"></div>
        <div id="circularG_5" class="circularG"></div>
        <div id="circularG_6" class="circularG"></div>
        <div id="circularG_7" class="circularG"></div>
        <div id="circularG_8" class="circularG"></div>
    </div>
</html>

===== 生成されたコード =====
<WRAP prewrap 100% #mincode>
| <code html>
<div id="circularG">
    <div id="circularG_1" class="circularG"></div>
    <div id="circularG_2" class="circularG"></div>
    <div id="circularG_3" class="circularG"></div>
    <div id="circularG_4" class="circularG"></div>
    <div id="circularG_5" class="circularG"></div>
    <div id="circularG_6" class="circularG"></div>
    <div id="circularG_7" class="circularG"></div>
    <div id="circularG_8" class="circularG"></div>
</div>
</code> | <code css>
@charset "utf-8";
/* https://icons8.com/cssload/ */

#circularG{
position:relative;
width:64px;
height:64px}

.circularG{
position:absolute;
background-color:#008300;
width:15px;
height:15px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-webkit-animation-name:bounce_circularG;
-webkit-animation-duration:0.4s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:bounce_circularG;
-moz-animation-duration:0.4s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
border-radius:10px;
-o-animation-name:bounce_circularG;
-o-animation-duration:0.4s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-ms-animation-name:bounce_circularG;
-ms-animation-duration:0.4s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
}

#circularG_1{
left:0;
top:25px;
-webkit-animation-delay:0.15s;
-moz-animation-delay:0.15s;
-o-animation-delay:0.15s;
-ms-animation-delay:0.15s;
}

#circularG_2{
left:7px;
top:7px;
-webkit-animation-delay:0.2s;
-moz-animation-delay:0.2s;
-o-animation-delay:0.2s;
-ms-animation-delay:0.2s;
}

#circularG_3{
top:0;
left:25px;
-webkit-animation-delay:0.25s;
-moz-animation-delay:0.25s;
-o-animation-delay:0.25s;
-ms-animation-delay:0.25s;
}

#circularG_4{
right:7px;
top:7px;
-webkit-animation-delay:0.3s;
-moz-animation-delay:0.3s;
-o-animation-delay:0.3s;
-ms-animation-delay:0.3s;
}

#circularG_5{
right:0;
top:25px;
-webkit-animation-delay:0.35s;
-moz-animation-delay:0.35s;
-o-animation-delay:0.35s;
-ms-animation-delay:0.35s;
}

#circularG_6{
right:7px;
bottom:7px;
-webkit-animation-delay:0.4s;
-moz-animation-delay:0.4s;
-o-animation-delay:0.4s;
-ms-animation-delay:0.4s;
}

#circularG_7{
left:25px;
bottom:0;
-webkit-animation-delay:0.45s;
-moz-animation-delay:0.45s;
-o-animation-delay:0.45s;
-ms-animation-delay:0.45s;
}

#circularG_8{
left:7px;
bottom:7px;
-webkit-animation-delay:0.5s;
-moz-animation-delay:0.5s;
-o-animation-delay:0.5s;
-ms-animation-delay:0.5s;
}

@-webkit-keyframes bounce_circularG{
0%{
-webkit-transform:scale(1)}

100%{
-webkit-transform:scale(.3)}

}

@-moz-keyframes bounce_circularG{
0%{
-moz-transform:scale(1)}

100%{
-moz-transform:scale(.3)}

}

@-o-keyframes bounce_circularG{
0%{
-o-transform:scale(1)}

100%{
-o-transform:scale(.3)}

}

@-ms-keyframes bounce_circularG{
0%{
-ms-transform:scale(1)}

100%{
-ms-transform:scale(.3)}

}
</code> |
</WRAP>