差分

このページの2つのバージョン間の差分を表示します。

--- html_css:css_loading_animation [2019/08/02 03:22] – 作成ともやん
+++ html_css:css_loading_animation [2021/06/07 04:24] (現在) – [生成されたコード] ともやん
@@ 行 1: / 行 1: @@
 ====== 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(){
+        jQuery(function() {
             var style = '<link rel="stylesheet" href="/_media/html_css/circular_g.css">';
             jQuery('head link:last').after(style);
         });
     </script>
-    <div id="wait_panel">
+    <div id="circularG">
-       <div id="circularG_wrapper">
+        <div id="circularG_1" class="circularG"></div>
-            <div id="circularG">
+        <div id="circularG_2" class="circularG"></div>
-                <div id="circularG_1" class="circularG"></div><div id="circularG_2" class="circularG"></div>
+        <div id="circularG_3" class="circularG"></div>
-                <div id="circularG_3" class="circularG"></div><div id="circularG_4" 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_5" class="circularG"></div>
-                <div id="circularG_7" class="circularG"></div><div id="circularG_8" class="circularG"></div>
+        <div id="circularG_6" class="circularG"></div>
-            </div>
+        <div id="circularG_7" class="circularG"></div>
-        </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{
+%{
+-webkit-transform:scale(1)}
+%{
+-webkit-transform:scale(.3)}
+}
+@-moz-keyframes bounce_circularG{
+%{
+-moz-transform:scale(1)}
+%{
+-moz-transform:scale(.3)}
+}
+@-o-keyframes bounce_circularG{
+%{
+-o-transform:scale(1)}
+%{
+-o-transform:scale(.3)}
+}
+@-ms-keyframes bounce_circularG{
+%{
+-ms-transform:scale(1)}
+%{
+-ms-transform:scale(.3)}
+}
+</code> |
+</WRAP>