When we encounter loading, it is either built-in in the UI framework or Baidu, and then CV is added to the project? However, when you implement it yourself, you will have no idea. In this article, I will share with you 10 Loading effects implemented in pure CSS. I hope it will be helpful to you!
See ten Loading effects introduced by T. Afif on Twitter. As shown above.
Yeah, it’s great, very practical, so I recorded it.
To ensure normal operation, we first stipulate:
* { box-sizing: border-box; }
1. Smooth loading
<div class="progress-1"></div>
.progress-1 { width:120px; height:20px; background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd; animation:p1 2s infinite linear; } @keyframes p1 { 100% {background-size:100%} }
linear-gradient(#000 0 0)
You can understand it aslinear-gradient(#000 0 100%)
. If you are not familiar with it yet, copylinear-gradient(#000 0 50%, #f00 50% 0)
, replace the original part and run it. If you feellinear-gradient(#000 0 0)
is awkward, just write#000
. [Recommended learning: css video tutorial]##0/0%
is
background-position: 0;/background-size : 0;Abbreviation of.
<div class="progress-2"></div>
.progress-2 { width:120px; height:20px; border-radius: 20px; background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue; animation:p2 2s infinite steps(10); } @keyframes p2 { 100% {background-size:110%} }
steps(10)
Yes The abbreviation of
step(10, end)indicates that there is no one at the beginning, so there is
point 2- ##100% {background-size:110%}
Add one more percentage of
step
. The abovestep
is10
, so it is100% ( 1/10)*100% = 110%
3. Stripe loading
<div class="progress-3"></div>
.progress-3 { width:120px; height:20px; border-radius: 20px; background: repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat, repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%; animation:p3 2s infinite; } @keyframes p3 { 100% {background-size:100%} }
Draw gray zebra stripes,repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat
is the stripe of the progress bar loading. 4. Dotted line loading
<div class="progress-4"></div>
.progress-4 { width:120px; height:20px; -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%; background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd; animation:p4 2s infinite steps(6); } @keyframes p4 { 100% {background-size:120%} }
has the default value repeat
, otherwise it will be masked There won't be five. 5. Battery loading
<div class="progress-5"></div>
.progress-5 { width:80px; height:40px; border:2px solid #000; padding:3px; background: repeating-linear-gradient(90deg,#000 0 10px,#0000 0 16px) 0/0% no-repeat content-box content-box; position: relative; animation:p5 2s infinite steps(6); } .progress-5::before { content:""; position: absolute; top: 50%; left:100%; transform: translateY(-50%); width:10px; height: 10px; border: 2px solid #000; } @keyframes p5 { 100% {background-size:120%} }
pseudo-element as follows: <pre class='brush:php;toolbar:false;'>.progress-5::before {
content:"";
position: absolute;
top:-2px;
bottom:-2px;
left:100%;
width:10px;
background:
linear-gradient(
#0000 calc(50% - 7px),#000 0 calc(50% - 5px),
#0000 0 calc(50% + 5px),#000 0 calc(50% + 7px),#0000 0) left /100% 100%,
linear-gradient(#000 calc(50% - 5px),#0000 0 calc(50% + 5px),#000 0) left /2px 100%,
linear-gradient(#0000 calc(50% - 5px),#000 0 calc(50% + 5px),#0000 0) right/2px 100%;
background-repeat:no-repeat;
}</pre>
6. Inline loading
The name is a bit inappropriate, but it’s not important. Readers can see the picture naturally. understand.
<div class="progress-6"></div>
.progress-6 { width:120px; height:22px; border-radius: 20px; color: #514b82; border:2px solid; position: relative; } .progress-6::before { content:""; position: absolute; margin:2px; inset:0 100% 0 0; border-radius: inherit; background: #514b82; animation:p6 2s infinite; } @keyframes p6 { 100% {inset:0} }
The right side is indented 100%
, so in keyframes## The # part requires setting
inset to
0.
7. Bead chain loading
<div class="progress-7"></div>
.progress-7 { width:120px; height:24px; -webkit-mask: radial-gradient(circle closest-side,#000 94%,#0000) 0 0/25% 100%, linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat; background: linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd; animation:p7 2s infinite linear; } @keyframes p7 { 100% {background-size:100%} }
mask-webkit-mask
radial-gradient is Divide the width into four equal parts and draw a circle with the smallest
closest-side side as the diameter for each part.
8. Zebra crossing loading
<div class="progress-8"></div>
.progress-8 { width:60px; height:60px; border-radius: 50%; -webkit-mask:linear-gradient(0deg,#000 55%,#0000 0) bottom/100% 18.18%; background: linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat #ddd; animation:p8 2s infinite steps(7); } @keyframes p8 { 100% {background-size:100% 115%} }
Adjust the angle drawn by linear-gradient
9. Water column loading
<div class="progress-9"></div>
.progress-9 { --r1: 154%; --r2: 68.5%; width:60px; height:60px; border-radius: 50%; background: radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center left, radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%) center center, radial-gradient(var(--r1) var(--r2) at top ,#0000 79.5%,#269af2 80%) center right, #ccc; background-size: 50.5% 220%; background-position: -100% 0%,0% 0%,100% 0%; background-repeat:no-repeat; animation:p9 2s infinite linear; } @keyframes p9 { 33% {background-position: 0% 33% ,100% 33% ,200% 33% } 66% {background-position: -100% 66%,0% 66% ,100% 66% } 100% {background-position: 0% 100%,100% 100%,200% 100%} }
radial-gradient
var(--r1) Directly call the defined attribute value. Skill
get ...
10. Signal loading
<div class="progress-10"></div>
.progress-10 { width:120px; height:60px; border-radius:200px 200px 0 0; -webkit-mask:repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%); background: radial-gradient(farthest-side at bottom,#514b82 0 95%,#0000 0) bottom/0% 0% no-repeat #ddd; animation:p10 2s infinite steps(6); } @keyframes p10 { 100% {background-size:120% 120%} }
Use the repeating-radial-gradient
radial-gradient Fill the circular gradient from the bottom upward.
Uha, after seeing so many cool operations, have you lost your skills?
Original address: https://twitter.com/ChallengesCss/status/1500437014616940546?cxt=HHwWhIC5gfzgz9IpAAAA
(Learning video sharing: web front-end)
The above is the detailed content of Share 10 Loading effects implemented in pure CSS. For more information, please follow other related articles on the PHP Chinese website!

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

Dreamweaver Mac version
Visual web development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Atom editor mac version download
The most popular open source editor

SublimeText3 Linux new version
SublimeText3 Linux latest version
