diff --git a/frontend/public/loading/option2/html_code_segment.html b/frontend/public/loading/option2/html_code_segment.html
index df81b26..4475603 100644
--- a/frontend/public/loading/option2/html_code_segment.html
+++ b/frontend/public/loading/option2/html_code_segment.html
@@ -1,5 +1,44 @@
+<!-- 预加载动画的最外层容器 -->
 <div class="preloading-animate">
+  <!-- 预加载的包装容器 -->
   <div class="preloading-wrapper">
-    <svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="67.802" cy="59.907" r="6" fill="#51CACC"><animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77"><animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle></svg>
+    <!-- 使用SVG创建预加载动画，设置视口和比例 -->
+    <svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+      <!-- 定义第一个圆形，设置初始位置、半径和填充颜色 -->
+      <circle cx="67.802" cy="59.907" r="6" fill="#51CACC">
+        <!-- 动画定义：圆形的x坐标、y坐标和填充颜色的变化 -->
+        <animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      </circle>
+      <!-- 定义第二个圆形，设置初始位置、半径和填充颜色 -->
+      <circle cx="46.079" cy="69.992" r="6" fill="#9DF871">
+        <!-- 动画定义：圆形的x坐标、y坐标和填充颜色的变化 -->
+        <animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      </circle>
+      <!-- 定义第三个圆形，设置初始位置、半径和填充颜色 -->
+      <circle cx="29.775" cy="52.449" r="6" fill="#E0FF77">
+        <!-- 动画定义：圆形的x坐标、y坐标和填充颜色的变化 -->
+        <animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      </circle>
+      <!-- 定义第四个圆形，设置初始位置、半径和填充颜色 -->
+      <circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6">
+        <!-- 动画定义：圆形的x坐标、y坐标和填充颜色的变化 -->
+        <animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      </circle>
+      <!-- 定义第五个圆形，设置初始位置、半径和填充颜色 -->
+      <circle cx="64.923" cy="36.13" r="6" fill="#FF708E">
+        <!-- 动画定义：圆形的x坐标、y坐标和填充颜色的变化 -->
+        <animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      </circle>
+    </svg>
   </div>
-</div>
\ No newline at end of file
+</div>