前端开发各种loading效果【loading图的顺序对应代码顺序】

news2024/11/19 13:42:03

效果图

在这里插入图片描述

HTML

<h1>Pure <b>SVG</b> Loader</h1>


<!-- Loader1 -->

<svg version="1.1" id="L1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <circle fill="none" stroke="#fff" stroke-width="6" stroke-miterlimit="15" stroke-dasharray="14.2472,14.2472" cx="50" cy="50" r="47" >
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="5s" 
         from="0 50 50"
         to="360 50 50" 
         repeatCount="indefinite" />
  </circle>
  <circle fill="none" stroke="#fff" stroke-width="1" stroke-miterlimit="10" stroke-dasharray="10,10" cx="50" cy="50" r="39">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="5s" 
         from="0 50 50"
         to="-360 50 50" 
         repeatCount="indefinite" />
  </circle>
  <g fill="#fff">
  <rect x="30" y="35" width="5" height="30">
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5" 
       repeatCount="indefinite" 
       begin="0.1"/>
  </rect>
  <rect x="40" y="35" width="5" height="30" >
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5" 
       repeatCount="indefinite" 
       begin="0.2"/>
  </rect>
  <rect x="50" y="35" width="5" height="30" >
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5" 
       repeatCount="indefinite" 
       begin="0.3"/>
  </rect>
  <rect x="60" y="35" width="5" height="30" >
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5"  
       repeatCount="indefinite" 
       begin="0.4"/>
  </rect>
  <rect x="70" y="35" width="5" height="30" >
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5" 
       repeatCount="indefinite" 
       begin="0.5"/>
  </rect>
  </g>
</svg>


<!-- Loader 2 -->

<svg version="1.1" id="L2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48"/>
<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
  <animateTransform 
       attributeName="transform" 
       dur="2s"
       type="rotate"
       from="0 50 50"
       to="360 50 50"
       repeatCount="indefinite" />
</line>
<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
  <animateTransform 
       attributeName="transform" 
       dur="15s"
       type="rotate"
       from="0 50 50"
       to="360 50 50"
       repeatCount="indefinite" />
</line>
</svg>


<!-- Loader 3 -->

<svg version="1.1" id="L3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="none" stroke="#fff" stroke-width="4" cx="50" cy="50" r="44" style="opacity:0.5;"/>
  <circle fill="#fff" stroke="#e74c3c" stroke-width="3" cx="8" cy="54" r="6" >
    <animateTransform
      attributeName="transform"
      dur="2s"
      type="rotate"
      from="0 50 48"
      to="360 50 52"
      repeatCount="indefinite" />
    
  </circle>
</svg>


<!-- Loader 4 -->

<svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
  <circle fill="#fff" stroke="none" cx="6" cy="50" r="6">
    <animate
      attributeName="opacity"
      dur="1s"
      values="0;1;0"
      repeatCount="indefinite"
      begin="0.1"/>    
  </circle>
  <circle fill="#fff" stroke="none" cx="26" cy="50" r="6">
    <animate
      attributeName="opacity"
      dur="1s"
      values="0;1;0"
      repeatCount="indefinite" 
      begin="0.2"/>       
  </circle>
  <circle fill="#fff" stroke="none" cx="46" cy="50" r="6">
    <animate
      attributeName="opacity"
      dur="1s"
      values="0;1;0"
      repeatCount="indefinite" 
      begin="0.3"/>     
  </circle>
</svg>

<!-- Loader 5 -->

<svg version="1.1" id="L5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
  <circle fill="#fff" stroke="none" cx="6" cy="50" r="6">
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 15 ; 0 -15; 0 15" 
       repeatCount="indefinite" 
       begin="0.1"/>
  </circle>
  <circle fill="#fff" stroke="none" cx="30" cy="50" r="6">
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 10 ; 0 -10; 0 10" 
       repeatCount="indefinite" 
       begin="0.2"/>
  </circle>
  <circle fill="#fff" stroke="none" cx="54" cy="50" r="6">
    <animateTransform 
       attributeName="transform" 
       dur="1s" 
       type="translate" 
       values="0 5 ; 0 -5; 0 5" 
       repeatCount="indefinite" 
       begin="0.3"/>
  </circle>
</svg>


<!-- Loader 6 -->

<svg version="1.1" id="L6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
   <rect fill="none" stroke="#fff" stroke-width="4" x="25" y="25" width="50" height="50">
  <animateTransform
     attributeName="transform"
     dur="0.5s"
     from="0 50 50"
     to="180 50 50"
     type="rotate"
     id="strokeBox"
     attributeType="XML"
     begin="rectBox.end"/>
  </rect>
   <rect x="27" y="27" fill="#fff" width="46" height="50">
  <animate
     attributeName="height"
     dur="1.3s"
     attributeType="XML"
     from="50" 
     to="0"
     id="rectBox" 
     fill="freeze"
     begin="0s;strokeBox.end"/>
  </rect>
</svg>

<!-- Loader 7 -->

<svg version="1.1" id="L7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
 <path fill="#fff" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
  c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="2s" 
         from="0 50 50"
         to="360 50 50" 
         repeatCount="indefinite" />
  </path>
 <path fill="#fff" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
  c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="1s" 
         from="0 50 50"
         to="-360 50 50" 
         repeatCount="indefinite" />
  </path>
 <path fill="#fff" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
  L82,35.7z">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="2s" 
         from="0 50 50"
         to="360 50 50" 
         repeatCount="indefinite" />
  </path>
</svg>

<!-- Loader 8 -->

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect fill="#fff" width="3" height="100" transform="translate(0) rotate(180 3 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30; 100; 30"
      repeatCount="indefinite"/>
</rect>
<rect x="17" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 20 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30; 100; 30"
      repeatCount="indefinite"
      begin="0.1s"/>
</rect>
<rect x="40" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 40 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30; 100; 30"
      repeatCount="indefinite"
      begin="0.3s"/>
</rect>
<rect x="60" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 58 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30; 100; 30"
      repeatCount="indefinite"
      begin="0.5s"/>
</rect>
<rect x="80" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 76 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30; 100; 30"
      repeatCount="indefinite"
      begin="0.1s"/>
</rect>
</svg>


<!-- Loader 9 -->

<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
    <rect x="20" y="50" width="4" height="10" fill="#fff">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="30" y="50" width="4" height="10" fill="#fff">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0.2s" dur="0.6s" repeatCount="indefinite" />
    </rect>
    <rect x="40" y="50" width="4" height="10" fill="#fff">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0.4s" dur="0.6s" repeatCount="indefinite" />
    </rect>
</svg>


<!-- Loader 10 -->

<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
    <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
      <animateTransform 
         attributeName="transform" 
         attributeType="XML" 
         type="rotate"
         dur="1s" 
         from="0 50 50"
         to="360 50 50" 
         repeatCount="indefinite" />
  </path>
</svg>

<!-- follow me template -->
<div class="made-with-love">
  Made with 
  <i>♥</i> by 
  <a target="_blank" href="https://codepen.io/nikhil8krishnan">Nikhil Krishnan</a>
</div>

CSS（基于SCSS的，改成css或者less需要简单改下哈）

@import url(https://fonts.googleapis.com/css?family=Comfortaa:400,700,300);

*,html{margin:0;padding:0}

//variables
$baseColor : #e74c3c;
$fontColor : #fff;

body{
  background: $baseColor;
  text-align: center;
  font-family: 'Comfortaa', cursive;
}
svg{
  width: 100px;
  height: 100px;
  margin: 20px;
  display:inline-block;
}
h1{
  text-align: center;
  color: $fontColor;
  margin: 0 0 100px;
  font-size: 34px;
  font-weight: 100;
  text-transform: uppercase;
  background-color: darken($baseColor, 5);
  padding: 20px 0;
  b{
    font-weight: 700;
  }
}

//follow me template
.made-with-love{
  margin-top: 20px;
  padding: 10px;
  font-size: 10px;
  font-family: arial;
  color: #fff;
  i{
    font-style: normal;
    color: #fff;
    font-size: 14px;
    position: relative;
    top: 2px;
  }
  a{
    color: #fff;
    text-decoration: none;
    &:hover{
      text-decoration: underline;
    }
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1109585.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

canvas绘制扫描图

canvas绘制扫描图

先定义一个canvas <div class"canFa"><canvas width"380" id"can3"></canvas></div>主要绘制函数 var chosHeight document.getElementsByClassName("canFa")[0].children[0].clientHeight;var chosWidth …
阅读更多...
springBoot--web--静态资源规则

springBoot--web--静态资源规则

规则一&#xff1a; 访问&#xff1a;/webjars/** 路径就去 classpath:/META-INF/resources/webjars/下载资源 a.maven导入依赖 规则二&#xff1a; 访问&#xff1a;/** 路径就去 静态资源默认的四个位置找资源 a. classpath:/META-INF/resources/ b.classpath:/resourc…
阅读更多...
mac虚拟机安装配置qt遇到的坑

mac虚拟机安装配置qt遇到的坑

本人的环境大致如下&#xff1a; VMware Workstation 16pro Mac镜像 macOS.Mojave10.14.6 &#xff08;后面在系统中升级到了 Sonoma 14.0&#xff09; Qt5.9.6 Xcode15.0 问题1&#xff1a; 环境都安装好后&#xff0c;qt创建工程一直只有.pro文件&#xff0c;看不到头文件和c…
阅读更多...
互联网洗鞋店为什么如此火爆

互联网洗鞋店为什么如此火爆

互联网洗鞋店管理系统&#xff0c;干洗店洗衣洗鞋小程序&#xff0c;专门为干洗店、洗鞋店打造的高效、实用、有价值的洗鞋私域流量管理软件系统。 帮助洗鞋人打造自己的私域流量&#xff0c;实现会员用户管理&#xff0c;用户与商家点对点互联互通&#xff0c;提高洗鞋人经营管…
阅读更多...
如何在ENVI中导入和定位SMAP的L3级土壤水分数据

如何在ENVI中导入和定位SMAP的L3级土壤水分数据

如何在ENVI中导入和定位SMAP的L3级土壤水分数据 一、数据获取 二、ENVI中打开SMAP 三、建立地理查找表 然后打开GLT工具 修改输入输出的投影方式 设置输出路径&#xff0c;OK 四、配准
阅读更多...
计算机中丢失VCRUNTIME140_1,总结vcruntime140_1.dll的五种修复方法

计算机中丢失VCRUNTIME140_1,总结vcruntime140_1.dll的五种修复方法

在使用计算机的过程中&#xff0c;我们可能会遇到各种各样的问题。其中&#xff0c;VCRuntime140_1.dll丢失是一个常见的问题。这个DLL文件是Microsoft Visual C 2015 Redistributable的一部分&#xff0c;它提供了许多重要的功能&#xff0c;包括一些运行时间库。当此DLL文件丢…
阅读更多...
前端用F11打开伪装更新页面demo后，老板被欺骗多次！

前端用F11打开伪装更新页面demo后，老板被欺骗多次！

前言 无意间看见朋友分享的页面看到了一个有趣的页面&#xff0c;通过F11之后给人以假乱真的感觉&#xff0c;这个代码并不难&#xff0c;我们一起来看看&#xff01; 正文 通过引入jQuery快速实现 一、js逻辑代码 function changeFullScreen() {const element document.doc…
阅读更多...
优雅而高效的JavaScript——try...catch语句（js异常处理）

优雅而高效的JavaScript——try...catch语句（js异常处理）

&#x1f601;博主&#xff1a;小猫娃来啦 &#x1f601;文章核心&#xff1a;优雅而高效的JavaScript——try…catch语句 文章核心 异常处理的重要性try...catch语句的基本语法和用法异常类型的分类和捕获内置异常类型自定义异常类型 try...catch的嵌套和多个块的应用finally子…
阅读更多...
华为智选SF5，AITO问界的车怎么样

华为智选SF5，AITO问界的车怎么样

#华为智选 #赛力斯SF5 #aito问界m5 #aito问界m7 #华为汽车 华为的车&#xff0c;后杠焊两点&#xff0c;拉车的时候&#xff0c;拖车钩断了&#xff0c;后杠拉出来了&#xff0c;这质量可以吗&#xff1f;是否应该全部召回&#xff1f;M5&#xff0c;M7是不是也这样&#xff1f…
阅读更多...
JAVA抽象概念大揭秘：用生动有趣的方式，带你领略编程的无限可能

JAVA抽象概念大揭秘：用生动有趣的方式，带你领略编程的无限可能

抽象的概念 抽象类和抽象方法是面向对象编程中的重要概念&#xff0c;用于实现抽象和继承的特性。抽象类是不能被实例化的类&#xff0c;通常用作其他类的基类。抽象方法是在抽象类中声明但没有具体实现的方法&#xff0c;需要在子类中实现具体的功能。 抽象类的用途 假设我…
阅读更多...
数据通信——应用层（Telnet与WWW）

数据通信——应用层（Telnet与WWW）

一&#xff0c;引言 我们使用交换机和路由器以及其它网络设备时&#xff0c;需要进行一些配置&#xff0c;因此需要登录的设备内部进行操作。登录到设备内部的方法有很多&#xff0c;比如通过console口或者其他串口与对端设备相连&#xff0c;也可以通过wifi无线连接&#xff0…
阅读更多...
NET MVC中如何使用Element-Plus

NET MVC中如何使用Element-Plus

目的 在Net Mvc5或者Net Core Mvc中&#xff0c;我们如何通过cdn的放引入Element-Plus并&#xff0c;使用Element-Plus相关的组件&#xff0c;包含Vue-Icon和多语言的使用。 准备工作 1.这里为了方便&#xff0c;我们直接使用html文件来代替Mvc项目。新建一个index.html文件…
阅读更多...
硬件知识：DDR3、DDR4和DDR5内存条有啥区别，看完你就懂

硬件知识：DDR3、DDR4和DDR5内存条有啥区别，看完你就懂

目录 一、DDR3内存 二、DDR4内存 三、DDR5内存 DDR3、DDR4和DDR5是计算机内存类型的名称&#xff0c;代表第三代、第四代和第五代双倍数据速率&#xff08;Double Data Rate&#xff0c;简称DDR&#xff09;同步动态随机存取存储器&#xff08;SDRAM&#xff09;。 不同内存…
阅读更多...
小程序开发平台源码系统 +功能丰富 +有完整搭建教程

小程序开发平台源码系统 +功能丰富 +有完整搭建教程

大家好啊&#xff0c;今天要给大家分享的这款系统可就厉害了。全新升级的小程序开发平台源码系统&#xff0c;其中包含了15项不同小程序功能&#xff0c;各行各业都有。一起来看看吧。以下是部分功能实现代码&#xff1a; 系统特色功能一览&#xff1a; 一、微同城本地生活服务…
阅读更多...
项目管理中，进度管理是决定成败的关键因素！（建议收藏）

项目管理中，进度管理是决定成败的关键因素！（建议收藏）

项目管理的主要目标在于确保员工充分理解其责任的目的和关键性&#xff0c;从而使其工作更具焦点和步骤性&#xff0c;以实现一目了然的效果。以小王在十字路口为例&#xff0c;项目经理就如同他的指路人&#xff0c;使其明确自己的方向&#xff0c;避免走错路。 在项目中&…
阅读更多...
华测监测预警系统 2.2---任意文件读取漏洞

华测监测预警系统 2.2---任意文件读取漏洞

目录 1. 资产搜集 2. 漏洞复现 3. 实战总结 1. 资产搜集 直接上fofa 和 hunter 个人推荐hunter可以看到icp备案公司直接提交盒子就行了 FOFA语法 app”华测监测预警系统2.2” Hunter语法 web.body”华测监测预警系统2.2” 2. 漏洞复现 这里手动复现的&#xff0c;目录是/…
阅读更多...
Kylin麒麟系统下安装人大金仓

Kylin麒麟系统下安装人大金仓

虚拟机在线安装 install open-vm-tools-desktop -y 简要介绍 人大金仓数据库管理系统KingbaseES&#xff08;简称&#xff1a;金仓数据库或KingbaseES&#xff09;是北京人大金仓信息技术股份有限公司自主研制开发的具有自主知识产权的通用关系型数据库管理系统。金仓数据库主…
阅读更多...
设计模式-装饰者模式

设计模式-装饰者模式

装饰者模式-简介 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其结构。这种类型的设计模式属于结构型模式&#xff0c;它是作为现有的类的一个包装。 装饰器模式通过将对象包装在装饰器类中&#xff0c;以…
阅读更多...
Unity中Shader的深度偏移Offset

Unity中Shader的深度偏移Offset

文章目录 前言一、深度偏移一般用于什么时候1、深度偏移一般用于两个模型 重合在同一平面时&#xff0c;在其中一个模型上使用深度偏移后&#xff0c;就能区别出两个模型的深度&#xff0c;从而消除闪动2、虽然&#xff0c;可以让两个模型在深度上错开一点点&#xff0c;来解决…
阅读更多...
工业级开源facechain人物写真sd-webui插件使用方式

工业级开源facechain人物写真sd-webui插件使用方式

一、简介 facechain人物写真应用自8月11日开源了第一版证件照生成后。目前在github&#xff08;https://github.com/modelscope/facechain&#xff09;上已有近6K的star&#xff0c;论文链接&#xff1a;FaceChain: A Playground for Identity-Preserving Portrait Generation…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023