时间戳

首页 > 解决方案 > 用于上传文件的五个不同图标的加载动画

html - 用于上传文件的五个不同图标的加载动画

问题描述

我有五个<svg>标签，我应该将相同的动画附加到所有标签上，它们的不透明度在无限循环中从 1 变为 0。我希望动画显示上传文件的进度。任何帮助，将不胜感激。

<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"/>
        </g>
    </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)"/>
        </g>
    </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)"/>
        </g>
    </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)"/>
        </g>
    </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)"/>
        </g>
    </svg>

标签： html

解决方案

@keyframes动画和animation-delay

@keyframes loading{
  0%{
    opacity:1;
  }
  50%{
    opacity:0;
  }
}
svg{
  animation:loading 1s infinite;
}

svg:nth-of-type(1){
  animation-delay:0.2s;
}
svg:nth-of-type(2){
  animation-delay:0.4s;
}
svg:nth-of-type(3){
  animation-delay:0.6s;
}
svg:nth-of-type(4){
  animation-delay:0.8s;
}
svg:nth-of-type(5){
  animation-delay:1s;
}
<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"/>
        </g>
    </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)"/>
        </g>
    </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)"/>
        </g>
    </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)"/>
        </g>
    </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)"/>
        </g>
    </svg>

推荐阅读