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

上百个精美网页Loading效果

微信用户2个月前 (04-28)游戏攻略126


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效果” 的相关文章

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

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

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

Windows 12 系统概念版 iSO 镜像下载

Windows 12 系统概念版 iSO 镜像下载

[Download]资源名称:(不包含PE)Windows 12 by sun12文件大小:3.96G下载地址1:https://pan.baidu.com/s/1hWnsc8Z9fSwqKyaQ5K_vyw?pwd=swkf 下载地址2:...

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...

Github上的超级良心又实用的【7款免费开源软件】,千万别错过!

Github上的超级良心又实用的【7款免费开源软件】,千万别错过!

1、Umi-OCR:基于 PaddleOCR 的 OCR 图片转文字识别软件。完全免费、可离线使用的开源软件,支持截屏识别文字、批量导入图片、横/竖排文字,还可以自动忽略水印区域,适用于 Win10 操作系统。【开源项目】2.server:...

Hitomi-Downloader下载&教程

Hitomi-Downloader下载&教程

[Download]资源名称:Hitomi-Downloader文件大小:81M下载地址1:https://pan.baidu.com/s/1oevn3hikn-A2EzxHXZv-qg?pwd=jvf4 下载地址2:https://git...

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

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

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