为五个文件上传SVG图标添加无限循环透明度变化加载动画需求咨询

Perfect choice using fading icons to show upload progress—super intuitive! Here are two straightforward ways to add that infinite opacity transition, with staggered timing so the icons animate one after another (which sells the "progress" feel way better than all moving at once):

Method 1: CSS Animation (Most Maintainable) #

This approach lets you control all animations from a single CSS block, making it easy to adjust timing or styles later.

First, add a shared class (like upload-dot) to each of your SVGs, then use nth-child selectors to stagger their animation start times. Here's the full code:

/* Define the core fade-in-out animation */
@keyframes fadeCycle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Apply base animation to all dots */
.upload-dot {
  animation: fadeCycle 1.5s infinite ease-in-out;
  margin: 0 2px; /* Optional: Add spacing between dots */
}

/* Stagger each dot's start time for a flowing progress effect */
.upload-dot:nth-child(1) { animation-delay: 0s; }
.upload-dot:nth-child(2) { animation-delay: 0.3s; }
.upload-dot:nth-child(3) { animation-delay: 0.6s; }
.upload-dot:nth-child(4) { animation-delay: 0.9s; }
.upload-dot:nth-child(5) { animation-delay: 1.2s; }

Your updated SVGs (wrapped in a container for nth-child targeting):

<div class="upload-loader">
  <svg class="upload-dot" xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
    <g id="Group_1707" data-name="Group_1707" transform="translate(-331 -351)">
      <path id="Path_3284" data-name="Path_3284" d="M2,0A2,2,0,1,1,0,2,2,2,0,0,1,2,0Z" transform="translate(331 351)" fill="#8c8c8c"/>
    </g>
  </svg>
  <svg class="upload-dot" xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
    <g id="Group_1707" data-name="Group_1707" transform="translate(-339 -351)">
      <rect id="Rectangle_2599" data-name="Rectangle_2599" width="4" height="4" rx="2" transform="translate(339 351)" fill="rgba(140,140,140,0.8)"/>
    </g>
  </svg>
  <svg class="upload-dot" xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
    <g id="Group_1707" data-name="Group_1707" transform="translate(-347 -351)">
      <rect id="Rectangle_2600" data-name="Rectangle_2600" width="4" height="4" rx="2" transform="translate(347 351)" fill="rgba(140,140,140,0.6)"/>
    </g>
  </svg>
  <svg class="upload-dot" xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
    <g id="Group_1707" data-name="Group_1707" transform="translate(-355 -351)">
      <rect id="Rectangle_2601" data-name="Rectangle_2601" width="4" height="4" rx="2" transform="translate(355 351)" fill="rgba(140,140,140,0.4)"/>
    </g>
  </svg>
  <svg class="upload-dot" xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
    <g id="Group_1707" data-name="Group_1707" transform="translate(-363 -351)">
      <rect id="Rectangle_2602" data-name="Rectangle_2602" width="4" height="4" rx="2" transform="translate(363 351)" fill="rgba(140,140,140,0.2)"/>
    </g>
  </svg>
</div>

Method 2: Inline SVG Animation (No CSS Needed) #

If you prefer self-contained SVGs (no external CSS), add <animate> elements directly inside each SVG's group. This keeps everything in one file:

<!-- First SVG -->
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
  <g id="Group_1707" data-name="Group_1707" transform="translate(-331 -351)">
    <path id="Path_3284" data-name="Path_3284" d="M2,0A2,2,0,1,1,0,2,2,2,0,0,1,2,0Z" transform="translate(331 351)" fill="#8c8c8c"/>
    <animate attributeName="opacity" values="1;0;1" dur="1.5s" repeatCount="indefinite" begin="0s"/>
  </g>
</svg>

<!-- Second SVG -->
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
  <g id="Group_1707" data-name="Group_1707" transform="translate(-339 -351)">
    <rect id="Rectangle_2599" data-name="Rectangle_2599" width="4" height="4" rx="2" transform="translate(339 351)" fill="rgba(140,140,140,0.8)"/>
    <animate attributeName="opacity" values="1;0;1" dur="1.5s" repeatCount="indefinite" begin="0.3s"/>
  </g>
</svg>

<!-- Third SVG -->
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
  <g id="Group_1707" data-name="Group_1707" transform="translate(-347 -351)">
    <rect id="Rectangle_2600" data-name="Rectangle_2600" width="4" height="4" rx="2" transform="translate(347 351)" fill="rgba(140,140,140,0.6)"/>
    <animate attributeName="opacity" values="1;0;1" dur="1.5s" repeatCount="indefinite" begin="0.6s"/>
  </g>
</svg>

<!-- Fourth SVG -->
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
  <g id="Group_1707" data-name="Group_1707" transform="translate(-355 -351)">
    <rect id="Rectangle_2601" data-name="Rectangle_2601" width="4" height="4" rx="2" transform="translate(355 351)" fill="rgba(140,140,140,0.4)"/>
    <animate attributeName="opacity" values="1;0;1" dur="1.5s" repeatCount="indefinite" begin="0.9s"/>
  </g>
</svg>

<!-- Fifth SVG -->
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
  <g id="Group_1707" data-name="Group_1707" transform="translate(-363 -351)">
    <rect id="Rectangle_2602" data-name="Rectangle_2602" width="4" height="4" rx="2" transform="translate(363 351)" fill="rgba(140,140,140,0.2)"/>
    <animate attributeName="opacity" values="1;0;1" dur="1.5s" repeatCount="indefinite" begin="1.2s"/>
  </g>
</svg>

Quick Tips: #

• Adjust the dur (duration) and delay values to make the animation faster or slower.
• The ease-in-out timing in CSS makes the fade feel smoother than a linear transition.
• The staggered delays create a "marching" effect that mimics progress moving forward—way more effective than all icons fading at once.

内容的提问来源于stack exchange，提问作者fatemeh maghsoudi