十三种html的loading样式资源-CSDN文库

共2个文件

png：1个

html：1个

需积分: 13 8 浏览量 2022-11-03 09:35:06 上传评论收藏 11KB ZIP 举报

HTML中的loading样式通常指的是在页面内容加载过程中展示的动画效果，用于告知用户页面正在加载，提升用户体验。在前端开发中，这些loading样式可以是简单的文本提示，也可以是复杂的图形动画。下面将详细介绍十三种常见的HTML loading样式及其相关知识点： 1. **纯文本样式**：最基础的加载样式，如“加载中...”，可以通过CSS控制文字颜色、大小、动画效果等。 2. **旋转图标**：例如经典的加载小菊花，可以使用CSS3的transform属性和animation属性实现旋转动画。 3. **线条动画**：通过CSS绘制线条并利用keyframes动画改变线条的状态，如逐段填充、旋转、缩放等。 4. **百分比加载**：显示加载进度，可以使用HTML5的progress元素配合JavaScript计算并更新进度。 5. **SVG动画**：使用SVG矢量图进行加载动画设计，可实现平滑的图形变换，且文件体积小。 6. **环形进度条**：通过CSS3的border-radius和animation创建环形填充动画，展示加载进度。 7. **点状加载**：点点滴滴的动画效果，常表现为“.”、“..”、“...”，使用CSS的animation延迟属性实现。 8. **彩色块动画**：多个彩色方块依次或同步加载，可通过CSS的flex布局和animation实现。 9. **3D加载**：利用CSS3的transform-style和perspective属性创建3D空间内的加载动画。 10. **文字变形动画**：如字母流动、拼接等效果，结合CSS3的transition和animation完成。 11. **背景渐变动画**：加载时背景颜色或图案动态变化，利用CSS的background-image和animation制作。 12. **图片加载过渡**：图片未加载时显示加载动画，加载完成后平滑过渡到图片，可结合JavaScript监听load事件。 13. **自定义图标动画**：设计师可以创建独特的加载图标，用CSS3的keyframes和transform属性制作动画效果。在实际应用中，开发者可以根据项目需求选择合适的加载样式，并通过CSS和JavaScript进行定制。对于性能优化，可以考虑使用懒加载技术，只在用户滚动到相应区域时加载资源，减少初始页面的加载时间。同时，合理运用服务端渲染和预加载策略也能有效提升用户体验。了解和掌握这些HTML loading样式，能够使前端开发者在构建网页时提供更加友好的用户体验，特别是在内容较多或加载时间较长的页面中，良好的加载动画设计至关重要。通过不断实践和创新，我们可以创造出更多独特且吸引人的加载效果。

资源推荐

资源详情

资源评论

收起资源包目录

loading.zip （2个子文件）

images

loading.png 8KB

加载.html 46KB

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS加载</title>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">  <style> .col-sm-3 { height: 100px; margin: 15px 0; } .col-sm-3 div { color: #fff; } .col-sm-3:nth-child(2n) { background-color: #ff6a00; } .col-sm-3:nth-child(2n+1) { background-color: #0094ff; } </style> </head> <body>  <div id="mainDiv"> <div class="row">  <div class="col-sm-3"> <style> .spinner1 { width: 40px; height: 40px; background-color: #fff; margin: 20px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } </style> <div class="spinner1"></div> </div>  <div class="col-sm-3"> <style> .sk-chase { width: 40px; height: 40px; position: relative; animation: sk-chase 2.5s infinite linear both; margin: 20px auto; } .sk-chase-dot { width: 100%; height: 100%; position: absolute; left: 0; top: 0; animation: sk-chase-dot 2.0s infinite ease-in-out both; } .sk-chase-dot:before { content: ''; display: block; width: 25%; height: 25%; background-color: #fff; border-radius: 100%; animation: sk-chase-dot-before 2.0s infinite ease-in-out both; } .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; } .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; } .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; } .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; } .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; } .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; } .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; } .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; } .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; } .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; } .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; } .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; } @keyframes sk-chase { 100% { transform: rotate(360deg); } } @keyframes sk-chase-dot { 80%, 100% { transform: rotate(360deg); } } @keyframes sk-chase-dot-before { 50% { transform: scale(0.4); } 100%, 0% { transform: scale(1.0); } } </style> <div class="sk-chase"> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> <div class="sk-chase-dot"></div> </div> </div>  <div class="col-sm-3"> <style> .spinner3 { width: 40px; height: 40px; position: relative; margin: 20px auto; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -

评论收藏

内容反馈