原文地址：https://cloud.tencent.com/developer/article/1006169

https://mp.weixin.qq.com/s/qmyn6mGrO6hRKuvKUSF8lA

https://dulinrain.github.io/css/使用Skeleton%20Screens增强网页的感知性能.html

https://codepen.io/janily/pen/rGqQgJ

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  7. <style>
  8. .timeline-item {
  9.    background: #fff;
  10.    border: 1px solid;
  11.    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  12.    border-radius: 3px;
  13.    padding: 12px;
  14.    margin: 0 auto;
  15.    max-width: 472px;
  16.    min-height: 200px;
  17. }
  18.  
  19. @keyframes placeHolderShimmer{
  20.     0% {
  21.         background-position: -468px 0
  22.     }
  23.     100%{
  24.         background-position: 468px 0
  25.     }
  26. }
  27.  
  28. .animated-background {
  29.     animation-duration: 1s;
  30.     animation-fill-mode: forwards;
  31.     animation-iteration-count: infinite;
  32.     animation-name: placeHolderShimmer;
  33.     animation-timing-function: linear;
  34.     background: #f6f7f8;
  35.     background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  36.     background-size: 800px 104px;
  37.     height: 40px;
  38.     position: relative;
  39. }
  40.  
  41. .background-masker {
  42.     background: #fff;
  43.     position: absolute;
  44. }
  45.  
  46. .background-masker.header-top,
  47. .background-masker.header-bottom,
  48. .background-masker.subheader-bottom {
  49.     top: 0;
  50.     left: 40px;
  51.     right: 0;
  52.     height: 10px;
  53. }
  54.  
  55. .background-masker.header-left,
  56. .background-masker.subheader-left,
  57. .background-masker.header-right,
  58. .background-masker.subheader-right {
  59.     top: 10px;
  60.     left: 40px;
  61.     height: 8px;
  62.     width: 10px;
  63. }
  64.  
  65. .background-masker.header-bottom {
  66.     top: 18px;
  67.     height: 6px;
  68. }
  69.  
  70. .background-masker.subheader-left,
  71. .background-masker.subheader-right {
  72.     top: 24px;
  73.     height: 6px;
  74. }
  75.  
  76. .background-masker.header-right,
  77. .background-masker.subheader-right {
  78.     width: auto;
  79.     left: 300px;
  80.     right: 0;
  81. }
  82.  
  83. .background-masker.subheader-right {
  84.     left: 230px;
  85. }
  86.  
  87. .background-masker.subheader-bottom {
  88.     top: 30px;
  89.     height: 10px;
  90. }
  91.  
  92. .background-masker.content-top,
  93. .background-masker.content-second-line,
  94. .background-masker.content-third-line,
  95. .background-masker.content-second-end,
  96. .background-masker.content-third-end,
  97. .background-masker.content-first-end {
  98.     top: 40px;
  99.     left: 0;
  100.     right: 0;
  101.     height: 6px;
  102. }
  103.  
  104. .background-masker.content-top {
  105.     height:20px;
  106. }
  107.  
  108. .background-masker.content-first-end,
  109. .background-masker.content-second-end,
  110. .background-masker.content-third-end{
  111.     width: auto;
  112.     left: 380px;
  113.     right: 0;
  114.     top: 60px;
  115.     height: 8px;
  116. }
  117.  
  118. .background-masker.content-second-line  {
  119.     top: 68px;
  120. }
  121.  
  122. .background-masker.content-second-end {
  123.     left: 420px;
  124.     top: 74px;
  125. }
  126.  
  127. .background-masker.content-third-line {
  128.     top: 82px;
  129. }
  130.  
  131. .background-masker.content-third-end {
  132.     left: 300px;
  133.     top: 88px;
  134. }
  135. </style>
  136. <body>
  137.     <div id="app">
  138.       <div v-for="user in users" class="items" v-if="loading">
  139.         <user-item :name="user.name" :email="user.email"></user-item>
  140.       </div>
  141.       <div v-for="load in loades" v-if="!loading">
  142.         <loading-item></loading-item>
  143.       </div>
  144.     </div>
  145. </body>
  146. <script>
  147.     // https://cloud.tencent.com/developer/article/1006169
  148.     Vue.component('user-item', {
  149.       props: ['email', 'name'],
  150.       template: `<div>
  151.           <h2 v-text="name"></h2>
  152.           <p v-text="email"></p>
  153.         </div>`
  154.     })
  155.  
  156.     Vue.component('loading-item', {
  157.       template: `<div class="animated-background">
  158.          <div class="background-masker header-top"></div>
  159.          <div class="background-masker header-left"></div>
  160.          <div class="background-masker header-right"></div>
  161.          <div class="background-masker header-bottom"></div>
  162.          <div class="background-masker subheader-left"></div>
  163.          <div class="background-masker subheader-right"></div>
  164.          <div class="background-masker subheader-bottom"></div>
  165.        </div>`
  166.     })
  167.  
  168.     var app = new Vue({
  169.       el: '#app',
  170.       data: {
  171.         users: [],
  172.         loading: false,
  173.         loades: 10
  174.       },
  175.       methods: {
  176.         getUserDetails: function() {
  177.           fetch('https://jsonplaceholder.typicode.com/users')
  178.             .then(result => result.json())
  179.             .then(result => {
  180.               this.users = result
  181.               this.loading = true
  182.             });
  183.         }
  184.       },
  185.       beforeMount: function() {
  186.         setTimeout(() => {
  187.           this.getUserDetails()
  188.         }, 3000);
  189.       }
  190.     });
  191. </script>
  192. </html>

基于Vuejs实现 Skeleton Loading 骨架图的更多相关文章

  1. Skeleton Screen -- 骨架屏--应用

    案例:使用 现已经在支付的项目使用 用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading( ...

  2. Skeleton Screen — 骨架屏

    用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验. Sk ...

  3. 最简单的基于libVLC的例子：最简单的基于libVLC的视频播放器（图形界面版）

    ===================================================== 最简单的基于libVLC的例子文章列表: 最简单的基于libVLC的例子:最简单的基于lib ...

  4. 基于Echarts的股票K线图展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...

  5. 基于jQuery果冻式按钮焦点图切换代码

    基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  6. 基于js全屏动画焦点图幻灯片

    今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="sl ...

  7. 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table

    基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367

  8. css skeleton loading & skeleton components

    css skeleton loading css & :empty See the Pen Skeleton Screen with CSS by xgqfrms (@xgqfrms) on ...

  9. （新手向）基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

随机推荐

  1. [Debug] Debug Node.js Application by using Chrome Dev tools

    For example you have a server.js file, and you want to debug some problems; What you can do is: node ...

  2. IOS遇到的问题总结

    1.NSString *path = [[NSBundle mainBundle] pathForResource:@"desc" ofType @"plist" ...

  3. 检查许可证所需的adobe application manager 丢失或损坏

    安装Adobe公司的一般都需要账号,记得以前安装Flex也是,这里提供一个公用账号: 帐号:992829179@qq.com 密码:521521 在安装Acrobat_Ⅺ_Pro_11.0.03后,弹 ...

  4. STL - 容器 - Array

    Array是C++ 11给STL新增加的容器 ArrayTest.cpp #include <array> #include <algorithm> #include < ...

  5. tomcat之组成结构

    1 - Tomcat Server的组成部分 1.1 - Server A Server element represents the entire Catalina servlet containe ...

  6. SHELL有用的命令

    [root@gechong /]# find / -name "gechong*" -print [root@gechong /]# find / -name "[A-Z ...

  7. javascript 设计模式

    了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...

  8. SIT与UAT的分别

    在企业级软件的测试过程中,经常会划分为三个阶段——单元测试,SIT和UAT,如果开发人员足够,通常还会在SIT之前引入代码审查机制(Code Review)来保证软件符合客户需求且流程正确.下面简单介 ...

  9. 解决itextpdf行高问题

    解法:PdfPCell.setFixedHeight(value);

  10. HTML字符实体举例说明

    html代码的意思 <>& ©∧∨"&qpos; 下面网址有详细说明: http://en.wikipedia.org/wiki/List_of_XML_and_ ...