[React] Create an Animate Content Placeholder for Loading State in React
We will create animated Content Placeholder as React component just like Facebook has when you load the page.
Key points:
1. For each elements on the DOM, you might need to create a placeholder components for that.
2. Different size prop is important
3. CSS animation
.placeholder {
position: relative;
overflow: hidden;
} .placeholder:before {
content: " ";
position: absolute;
top:;
right:;
bottom:;
left:;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.35) 8%,
rgba(255, 255, 255, 0) 16%
);
animation: scanner 0.9s linear infinite;
z-index:;
} @keyframes scanner {
0% {
transform: translateX(-20%);
} 100% {
transform: translateX(170%);
}
} .placeholder__headline {
height: 22px;
background-color: var(--placeholder-color);
margin-bottom: 20px;
} .placeholder__text {
height: 16px;
background-color: var(--placeholder-color);
margin-bottom: 8px;
} .placeholder__image {
border-radius: 50%;
background-color: var(--placeholder-color);
height: 100px;
} .placeholder__text--small {
width: 25%;
} .placeholder__text--medium {
width: 50%;
} .placeholder__text--large {
width: 75%;
} .placeholder__text--block {
width: 100%;
}
Placeholder.jxs:
import React from "react";
import cx from "classnames"; export default function Placeholder({ children, className }) {
return <div className={cx(className, "placeholder")}>{children}</div>;
}
import React from "react"; export default function Image() {
return <div className="placeholder__image" />;
}
[React] Create an Animate Content Placeholder for Loading State in React的更多相关文章
- [React] Use CSS Transitions to Avoid a Flash of Loading State
Based on research at Facebook, we know that if a user sees a flash of loading state, they perceive t ...
- React Js之组件(Component)与state
React Js组件: 组件(Component)是为了更好的维护我们的应用,可以在不影响其他的组件的情况下更新或者更改组件. state:是标记数据的来源,我们使state比较简单和单一,如果我们有 ...
- 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...
- 《React Native 精解与实战》书籍连载「React Native 底层原理」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React子组件怎么改变父组件的state
React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...
- [Svelte 3] Use await block to wait for a promise and handle loading state in Svelte 3
Most web applications have to deal with asynchronous data at some point. Svelte 3 apps are no differ ...
- React virtual DOM explained in simple English/简单语言解释React的虚拟DOM
初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...
- CSS3效果:animate实现点点点loading动画效果(一)
实现如图所示的点点点loading效果: 一:CSS3 animation实现代码 html代码: 提交订单中<span class="ani_dot">...< ...
随机推荐
- Git手册(一):基本操作
Git小册 本手册参考自runoob及其他网络资源,仅用于学习交流 Git工作流程 一般工作流程 1.克隆 Git 资源作为工作目录. 2.在克隆的资源上添加或修改文件. 3.如果其他 ...
- Go语言 ( 切片)
本文主要介绍Go语言中切片(slice)及它的基本使用. 引子 因为数组的长度是固定的并且数组长度属于类型的一部分,所以数组有很多的局限性. 例如: func arraySum(x []int) in ...
- 【LEETCODE】55、数组分类,适中级别,题目:79、611、950
第950题,这题我是真的没想到居然会说使用队列去做,大神的答案,拿过来瞻仰一下 package y2019.Algorithm.array; import java.util.HashMap; imp ...
- TextField 、 FTE、 TLF 的使用情景和简单说明
作者:tiangej 来源:CSDN 原文:https://blog.csdn.net/tiangej/article/details/16859239 版权声明:本文为博主原创文章,转载请附上博文链 ...
- Synchronized 和 Lock 的主要区别(转)
Synchronized 和 Lock 的主要区别Synchronzied 和 Lock 的主要区别如下: 存在层面:Syncronized 是Java 中的一个关键字,存在于 JVM 层面,Lock ...
- 关于Eclipse导入maven项目报空指针异常
今天新建了一个maven项目,因为是通过公司的工具新建的,代码拉下来就有src.pom.xml文件. 导入Eclipse却报空指针异常.具体如下: An error has occurred. See ...
- windows下安装hexo和生成博客
首先在电脑上安装node和git,这个只要在相关官网的下载然后一步安装即可. 然后在你的电脑上新建一个文件夹,用来存放你的博客文件,比如创建hexo 进入该文件,右键打开git bash 安装hexo ...
- css实现 textarea 高度自适应
此textarea非彼textarea ,有经验的老司机们应该知道html标签contenteditable这个属性. 利用此属性使当前的标签成为可以输入的状态,等同于输入框. 演示地址:https: ...
- c# 格式化数据String.Format
- [https][tls] 如何使用wireshark查看tls/https加密消息--使用私钥
之前总结了使用keylog进行https流量分析的方法: [https][tls] 如何使用wireshark查看tls/https加密消息--使用keylog 今天总结一下使用服务器端证书私钥进行h ...