当前位置:首页 > 游戏攻略 > 上百个精美网页Loading效果

上百个精美网页Loading效果

微信用户1年前 (2024-04-28)游戏攻略606


loading效果是网页里面不可缺少的一部分,loading效果在网页中的作用是为了让用户知道页面正在加载中,提高用户体验。当用户访问网页时,如果页面加载速度较慢,没有loading效果的话,用户可能会感到焦虑和不耐烦,甚至会误以为页面无法加载。而有了loading效果,用户可以看到页面正在加载中,知道等待时间有限,可以增加用户的耐心和等待意愿。此外,loading效果也可以增加网页的视觉吸引力,使页面更加生动和有趣。


loading效果一般可以使用UI组件库里面带的,但是通常UI组件库里面的都比较单一,且有时候并不能满足需求,本期分享几个我用过的精美好用的loading效果网站,每一个都是纯css,可以一键复制到网页中使用,方便快捷。

1

https://epic-spinners.epicmax.co

上百个精美网页Loading效果

点击想要的效果就会弹出相关代码,然后复制就行了

上百个精美网页Loading效果


2

https://css-loaders.com/spinner/

这个网站里面效果更多,而且还做了分类,很好用

上百个精美网页Loading效果


随便找了一个,顺便看了下复制出来的css,这几行就能写出来3D加载的效果,果然是大佬的手笔!


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .loader {
        --s: 25px;
        --g :5px;
        
        width: calc(2*(1.353*var(--s) + var(--g)));
        aspect-ratio: 1;
        background:
          linear-gradient(#ff1818 0 0) left/50% 100% no-repeat,
          conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)),
            #fff 135deg,#666 0 270deg,#aaa 0);
        background-blend-mode: multiply;
        --_m:
          linear-gradient(to bottom right,
             #0000 calc(0.25*var(--s)),#000 0 calc(100% - calc(0.25*var(--s)) - 1.414*var(--g)),#0000 0),
          conic-gradient(from -90deg at right var(--g) bottom var(--g),#000 90deg,#0000 0);
        -webkit-mask: var(--_m);
                mask: var(--_m);
        background-size: 50% 50%;
        -webkit-mask-size: 50% 50%;
                mask-size: 50% 50%;
        -webkit-mask-composite: source-in;
                mask-composite: intersect;
        animation: l9 1.5s infinite;
      }
      @keyframes l9 {
        0%,12.5% {background-position:0% 0%,0 0}
        12.6%,37.5% {background-position:100% 0%,0 0}
        37.6%,62.5% {background-position:100% 100%,0 0}
        62.6%,87.5% {background-position:0% 100%,0 0}
        87.6%,100% {background-position:0% 0%,0 0}
      }
</style>
  </head>
  <body>
    <div class="loader"></div>
  </body>
</html>

就这两个完全够用了,本期结束-收工!


本篇文章来源于微信公众号:                 雪天前端

免责声明
    本网站在国家相关法律法规规定的范围内,只按现有状况提供文章发布第三方网络平台服务,本网站及其所有者非交易一方,也非交易任何一方之代理人或代表;同时,本网站及其所有者也未授权任何人代表或代理本网站及其所有者从事任何网络交易行为或做出任何承诺、保证或其他类似行为,除非有明确的书面授权。
    鉴于互联网的特殊性,本网站无法鉴别和判断相关交易各主体之民事权利和行为能力、资质、信用等状况,也无法鉴别和判断虚拟交易或正在交易或已交易之虚拟物品来源、权属、真伪、性能、规格、质量、数量等权利属性、自然属性及其他各种状况。因此,交易各方在交易前应加以仔细辨明,并慎重考虑和评估交易可能产生的各项风险。

扫描二维码推送至手机访问。

版权声明:本文由点度点度金讯时代-BLOG发布,如需转载请注明出处。

本文链接:https://lmwmm.com/post/2830.html

分享给朋友:

“上百个精美网页Loading效果” 的相关文章

Adobe Photoshop 2020「Ps 2020」破解版

Adobe Photoshop 2020「Ps 2020」破解版

      ps 2020破解版是一款由Adobe公司推出的非常优秀的图像编辑处理工具,ps2020破解版有图像制作、图像扫描、编辑修改、广告创意、图像输入等功能。ps 2020破...

5款良心实用的软件推荐,真正的新系统必备,绝对刷新你的认知!

5款良心实用的软件推荐,真正的新系统必备,绝对刷新你的认知!

 1.Final2x 图片放大工具,免费开源 【开源项目】2.Gopeed 一款支持全平台的下载器 【官方下载】3.视频压缩神器 【下载链接】4.Optimizer 堪称是 Windows 系统上最好...

Windows 10 发布极限精简版!(Tiny10 x64 23H1) 支持 64 位系统和中文,只需7.8G空间

Windows 10 发布极限精简版!(Tiny10 x64 23H1) 支持 64 位系统和中文,只需7.8G空间

昨日,开发者 NTDEV 发布了 tiny10 2303,面向那些需要具有较小磁盘占用空间和最新更新的轻量级现代 Windows 10 版本的用户 下载地址:【链接直达】[Download]资源名称:tiny10 23h1 x64...

【已测】引流源码在线随机抖音美女视频php源码 高清无水印

【已测】引流源码在线随机抖音美女视频php源码 高清无水印

源码介绍:一款引流源码在线随机抖音美女视频php源码 高清无水印,本地视频调用,可以用引流非常不错。解压上传源码即可。源码截图:...

最完美的海外版Tiktok免拔卡抖音国际版

最完美的海外版Tiktok免拔卡抖音国际版

tiktok作为一款为国外软件提供服务的软件,很多朋友不知道tiktok怎么在国内使用,其实我们只需要准备好一些工具,就可以了,下面就跟着小编的教程来看一下tiktok怎么在国内使用吧。大家都知道tiktok是国外版抖音,那么在国内怎么玩t...

开源AI人脸替换工具离线版V3.0 整合包下载

开源AI人脸替换工具离线版V3.0 整合包下载

 无需配置任何环境,解压后即可使用,只需一张人脸图片,就可以把视频中的人脸换成你需要人物。无任何使用门槛,支持CPU和GPU解码!1.AI人脸替换工具离线版V3.0 整合包:【国外网盘】【国内网盘下载】2.开源项目:【GitHub...