首页 > 资讯 > 前端开发 > JavaScript >css中常见的loding效果实现方法有哪些

547

分享到

css中常见的loding效果实现方法有哪些

2024-04-02 19:04:59 547人浏览薄情痞子

摘要

这篇文章主要为大家展示了“CSS中常见的loding效果实现方法有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中常见的loding效果实现方法有哪些

这篇文章主要为大家展示了“CSS中常见的loding效果实现方法有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中常见的loding效果实现方法有哪些”这篇文章吧。

<html lang="en">

<head>

<title>Loading</title>

<style>

.loader {

float: left;

}

.loader {

position: relative;

width: 5rem;

height: 5rem;

}

.loader.small {

-WEBkit-transfORM: scale(.5);

transform: scale(.5);

}

.loader.circle-line,

.loader.circle-round {

height: 5rem;

}

.loader.circle-line span {

position: absolute;

display: inline-block;

width: 1.5rem;

height: .5rem;

border-top-left-radius: .25rem;

border-bottom-left-radius: .25rem;

background: #1ABC9C;

opacity: .05;

-webkit-animation: circle-line 1s ease infinite;

animation: circle-line 1s ease infinite;

}

.loader.circle-line span:nth-child(1) {

top: 50%;

left: 0;

margin-top: -.25rem;

-webkit-animation-delay: .13s;

animation-delay: .13s;

}

.loader.circle-line span:nth-child(2) {

top: 1rem;

left: .5rem;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-animation-delay: .26s;

animation-delay: .26s;

}

.loader.circle-line span:nth-child(3) {

left: 50%;

top: .5rem;

margin-left: -.75rem;

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

-webkit-animation-delay: .39s;

animation-delay: .39s;

}

.loader.circle-line span:nth-child(4) {

right: .5rem;

top: 1rem;

-webkit-transform: rotate(145deg);

transform: rotate(145deg);

-webkit-animation-delay: .52s;

animation-delay: .52s;

}

.loader.circle-line span:nth-child(5) {

left: 3.5rem;

top: 50%;

margin-top: -.25rem;

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

-webkit-animation-delay: .65s;

animation-delay: .65s;

}

.loader.circle-line span:nth-child(6) {

bottom: 1rem;

right: .5rem;

-webkit-transform: rotate(-145deg);

transform: rotate(-145deg);

-webkit-animation-delay: .78s;

animation-delay: .78s;

}

.loader.circle-line span:nth-child(7) {

left: 50%;

bottom: .5rem;

margin-left: -15px;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

-webkit-animation-delay: .91s;

animation-delay: .91s;

}

.loader.circle-line span:nth-child(8) {

bottom: 1rem;

left: .5rem;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-animation-delay: 1.04s;

animation-delay: 1.04s;

}

@keyframes circle-line {

0% {

opacity: .05;

}

100% {

opacity: .7;

}

@-webkit-keyframes circle-line {

0% {

opacity: .05;

}

100% {

opacity: .7;

}

.loader.circle-line-spin .circle-line-inner {

width: 100%;

height: 100%;

-webkit-animation: circle-line-spin 1.5s linear infinite;

animation: circle-line-spin 1.5s linear infinite;

}

.loader.circle-line-spin span {

position: absolute;

display: inline-block;

width: 1.5rem;

height: .5rem;

border-top-left-radius: .25rem;

border-bottom-left-radius: .25rem;

background: #1ABC9C;

opacity: .7;

}

.loader.circle-line-spin span:nth-child(1) {

top: 50%;

left: 0;

margin-top: -.25rem;

}

.loader.circle-line-spin span:nth-child(2) {

top: 1rem;

left: .5rem;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

.loader.circle-line-spin span:nth-child(3) {

left: 50%;

top: .5rem;

margin-left: -.75rem;

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.loader.circle-line-spin span:nth-child(4) {

right: .5rem;

top: 1rem;

-webkit-transform: rotate(145deg);

transform: rotate(145deg);

}

.loader.circle-line-spin span:nth-child(5) {

left: 3.5rem;

top: 50%;

margin-top: -.25rem;

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.loader.circle-line-spin span:nth-child(6) {

bottom: 1rem;

right: .5rem;

-webkit-transform: rotate(-145deg);

transform: rotate(-145deg);

}

.loader.circle-line-spin span:nth-child(7) {

left: 50%;

bottom: .5rem;

margin-left: -15px;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

.loader.circle-line-spin span:nth-child(8) {

bottom: 1rem;

left: .5rem;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

@keyframes circle-line-spin {

0% {

transform: rotate(0);

}

100% {

transform: rotate(360deg);

}

@-webkit-keyframes circle-line-spin {

0% {

-webkit-transform: rotate(0);

}

100% {

-webkit-transform: rotate(360deg);

}

.loader.circle-round span {

opacity: .05;

-webkit-animation: circle-round 1s ease infinite;

animation: circle-round 1s ease infinite;

}

.loader.circle-round-fade span {

-webkit-animation: circle-round-fade 1s ease infinite;

animation: circle-round-fade 1s ease infinite;

}

.loader.circle-round span,

.loader.circle-round-fade span {

position: absolute;

width: .8rem;

height: .8rem;

display: inline-block;

border-radius: 50%;

background: #1ABC9C;

}

.loader.circle-round span:nth-child(1),

.loader.circle-round-fade span:nth-child(1) {

top: 50%;

left: 0;

margin-top: -.4rem;

-webkit-animation-delay: -1.04s;

animation-delay: -1.04s;

}

.loader.circle-round span:nth-child(2),

.loader.circle-round-fade span:nth-child(2) {

top: .7rem;

left: .7rem;

-webkit-animation-delay: -.91s;

animation-delay: -.91s;

}

.loader.circle-round span:nth-child(3),

.loader.circle-round-fade span:nth-child(3) {

top: 0;

left: 50%;

margin-left: -.4rem;

-webkit-animation-delay: -.78s;

animation-delay: -.78s;

}

.loader.circle-round span:nth-child(4),

.loader.circle-round-fade span:nth-child(4) {

right: .7rem;

top: .7rem;

-webkit-animation-delay: -.65s;

animation-delay: -.65s;

}

.loader.circle-round span:nth-child(5),

.loader.circle-round-fade span:nth-child(5) {

right: 0;

top: 50%;

margin-top: -.4rem;

-webkit-animation-delay: -.52s;

animation-delay: -.52s;

}

.loader.circle-round span:nth-child(6),

.loader.circle-round-fade span:nth-child(6) {

bottom: .7rem;

right: .7rem;

-webkit-animation-delay: -.39s;

animation-delay: -.39s;

}

.loader.circle-round span:nth-child(7),

.loader.circle-round-fade span:nth-child(7) {

bottom: 0;

left: 50%;

margin-left: -.4rem;

-webkit-animation-delay: -.26s;

animation-delay: -.26s;

}

.loader.circle-round span:nth-child(8),

.loader.circle-round-fade span:nth-child(8) {

left: .7rem;

bottom: .7rem;

-webkit-animation-delay: -.13s;

animation-delay: -.13s;

}

@keyframes circle-round {

0% {

opacity: .05;

}

100% {

opacity: .7;

}

@-webkit-keyframes circle-round {

0% {

opacity: .05;

}

100% {

opacity: .7;

}

@keyframes circle-round-fade {

0% {

opacity: .25;

transform: scale(.2);

}

100% {

opacity: 1;

transform: scale(1);

}

@-webkit-keyframes circle-round-fade {

0% {

opacity: .25;

transform: scale(.2);

}

100% {

opacity: 1;

transform: scale(1);

}

.loader.line-square {

width: 6rem;

height: .8rem;

}

.loader.line-square span {

position: absolute;

top: 0;

width: .8rem;

height: .8rem;

display: inline-block;

background: #1ABC9C;

-webkit-animation: line-square 1s ease infinite;

animation: line-square 1s ease infinite;

}

.loader.line-square span:nth-child(1) {

left: 0;

-webkit-animation-delay: .13s;

animation-delay: .13s;

}

.loader.line-square span:nth-child(2) {

left: 1.3rem;

-webkit-animation-delay: .26s;

animation-delay: .26s;

}

.loader.line-square span:nth-child(3) {

left: 2.6rem;

-webkit-animation-delay: .39s;

animation-delay: .39s;

}

.loader.line-square span:nth-child(4) {

left: 3.9rem;

-webkit-animation-delay: .52s;

animation-delay: .52s;

}

.loader.line-square span:nth-child(5) {

left: 5.2rem;

-webkit-animation-delay: .65s;

animation-delay: .65s;

}

@keyframes line-square {

0% {

opacity: 1;

transform: scale(1.2);

-webkit-transform: scale(1.2);

}

100% {

opacity: .2;

transform: scale(.2);

-webkit-transform: scale(.2);

}

@-webkit-keyframes line-square {

0% {

opacity: 1;

transform: scale(1.2);

-webkit-transform: scale(1.2);

}

100% {

opacity: .2;

transform: scale(.2);

-webkit-transform: scale(.2);

}

.loader.line-round {

width: 6rem;

height: .8rem;

}

.loader.line-round span {

position: absolute;

top: 0;

width: .8rem;

height: .8rem;

border-radius: 50%;

display: inline-block;

background: #1ABC9C;

-webkit-animation: line-round 1s ease infinite;

animation: line-round 1s ease infinite;

}

.loader.line-round span:nth-child(1) {

left: 0;

-webkit-animation-delay: .13s;

animation-delay: .13s;

}

.loader.line-round span:nth-child(2) {

left: 1.3rem;

-webkit-animation-delay: .26s;

animation-delay: .26s;

}

.loader.line-round span:nth-child(3) {

left: 2.6rem;

-webkit-animation-delay: .39s;

animation-delay: .39s;

}

.loader.line-round span:nth-child(4) {

left: 3.9rem;

-webkit-animation-delay: .52s;

animation-delay: .52s;

}

.loader.line-round span:nth-child(5) {

left: 5.2rem;

-webkit-animation-delay: .65s;

animation-delay: .65s;

}

@keyframes line-round {

0% {

opacity: 1;

transform: scale(1.2);

-webkit-transform: scale(1.2);

}

100% {

opacity: .2;

transform: scale(.2);

-webkit-transform: scale(.2);

}

@-webkit-keyframes line-round {

0% {

opacity: 1;

transform: scale(1.2);

-webkit-transform: scale(1.2);

}

100% {

opacity: .2;

transform: scale(.2);

-webkit-transform: scale(.2);

}

.loader.line-bounce {

width: 6rem;

height: 2.5rem;

}

.loader.line-bounce span {

position: absolute;

top: 0;

width: .5rem;

height: 2.5rem;

border-radius: 5px;

display: inline-block;

background: #1ABC9C;

-webkit-animation: line-bounce 1s ease infinite;

animation: line-bounce 1s ease infinite;

}

.loader.line-bounce span:nth-child(1) {

left: 0;

-webkit-animation-delay: -.65s;

animation-delay: -.65s;

}

.loader.line-bounce span:nth-child(2) {

left: 1.3rem;

-webkit-animation-delay: -.78s;

animation-delay: -.78s;

}

.loader.line-bounce span:nth-child(3) {

left: 2.6rem;

-webkit-animation-delay: -.91s;

animation-delay: -.91s;

}

.loader.line-bounce span:nth-child(4) {

left: 3.9rem;

-webkit-animation-delay: -.78s;

animation-delay: -78s;

}

.loader.line-bounce span:nth-child(5) {

left: 5.2rem;

-webkit-animation-delay: -.65s;

animation-delay: -.65s;

}

@keyframes line-bounce {

0% {

transform: scaleY(1);

}

50% {

transform: scaleY(.3);

}

100% {

transform: scaleY(1);

}

@-webkit-keyframes line-bounce {

0% {

-webkit-transform: scaleY(1);

}

50% {

-webkit-transform: scaleY(.3);

}

100% {

-webkit-transform: scaleY(1);

}

.loader.circle-spin {

border-radius: 50%;

border: .2rem solid rgba(0, 0, 0, .05);

width: 4rem;

height: 4rem;

box-sizing: content-box;

}

.loader.circle-spin .loader-placeholder {

position: absolute;

top: -.2rem;

left: -.2rem;

border-radius: 50%;

border: .2rem solid transparent;

border-top: .2rem solid #1ABC9C;

width: 4rem;

height: 4rem;

box-sizing: content-box;

-webkit-animation: circle-spin 1s ease infinite;

animation: circle-spin 1s ease infinite;

}

@keyframes circle-spin {

0% {

transform: rotate(0);

}

100% {

transform: rotate(360deg);

}

@-webkit-keyframes circle-spin {

0% {

-webkit-transform: rotate(0);

}

100% {

-webkit-transform: rotate(360deg);

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

以上是“css中常见的loding效果实现方法有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网JavaScript频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: css中常见的loding效果实现方法有哪些

本文链接: https://www.lsjlt.com/news/91449.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

css中常见的loding效果实现方法有哪些

这篇文章主要为大家展示了“css中常见的loding效果实现方法有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中常见的loding效果实现方法有哪些...

99+

2024-04-02
在HTML中使用CSS的常见方法有哪些

这篇文章主要讲解了“在HTML中使用CSS的常见方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“在HTML中使用CSS的常见方法有哪些”吧！层叠样式...

99+

2024-04-02
css中常见margin用法有哪些

小编给大家分享一下css中常见margin用法有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！margin 1、margi...

99+

2024-04-02
怎么用CSS实现常见的UI效果

这篇文章主要介绍“怎么用CSS实现常见的UI效果”，在日常操作中，相信很多人在怎么用CSS实现常见的UI效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS实现常见...

99+

2024-04-02
CSS常用的前端效果有哪些

本文小编为大家详细介绍“CSS常用的前端效果有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS常用的前端效果有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。1、禁止...

99+

2024-04-02
css中有哪些实现等高布局常的方法

这篇文章给大家介绍css中有哪些实现等高布局常的方法，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是...

99+

2023-06-08
CSS中常见的布局有哪些

这篇文章主要讲解了“CSS中常见的布局有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS中常见的布局有哪些”吧！ CSS...

99+

2024-04-02
CSS中有哪些常见的布局

这篇文章将为大家详细讲解有关CSS中有哪些常见的布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。　　1、常见的单列布局：　　header,content和foo...

99+

2024-04-02
css中常见的单位有哪些

css中常见的单位有：px：绝对单位，在页面中是按照精确的像素来展示em：相对单位，基准点为父节点字体的大小，若是自身定义了font-size则按自身来计算rem：相对单位，相对根节点html的字体大小来计算vw：viewpoint wid...

99+

2024-04-02
JavaScript中String常见的方法有哪些

这篇文章主要介绍JavaScript中String常见的方法有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1、charAt从一个字符串中返回指定的字符语法str.charAt(index)参数index一个介于...

99+

2023-06-25
实现CSS居中的方法有哪些

这篇文章主要介绍了实现CSS居中的方法有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。假设现在给出这种场景：<div ...

99+

2024-04-02
Java中StringBuilder()常见方法有哪些

在Java中，StringBuilder类提供了多个常见的方法用于字符串的操作，以下是一些常用的方法：1. append(Strin...

99+

2023-09-13

Java
如何使用 CSS 实现各种常见的效果

CSS 是一种用于设计网页样式和布局的技术。在这篇文章中，我们将探讨如何使用 CSS 实现各种常见的效果。一、实现圆形图片在网页设计中，经常需要使用圆形图片来进行美化。实现圆形图片通常有两种方式：一种是使用一个正方形图片并将其裁剪成圆形，另...

99+

2023-05-14
JS实现轮播图效果的方法有哪些

这篇文章主要讲解了“JS实现轮播图效果的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JS实现轮播图效果的方法有哪些”吧！Js实现轮播图01实现思路这可能是轮播图最简单点的实现之一...

99+

2023-06-25
javascript中常见的数组方法有哪些

小编给大家分享一下javascript中常见的数组方法有哪些，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！javascript数组方法有：concat()、join()、pop()、push()、revers&#...

99+

2023-06-14
有哪些常见的css框架

这篇文章给大家介绍有哪些常见的css框架，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。1.Bootstrap基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。...

99+

2023-06-14
CSS常见的技巧有哪些

本篇内容主要讲解“CSS常见的技巧有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS常见的技巧有哪些”吧!如何清除图片下方出现几像素的空白间隙？代码如下:方法1： img{displa...

99+

2023-06-08
css实现波浪效果的方法

本篇内容主要讲解“css实现波浪效果的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css实现波浪效果的方法”吧!css实现波浪效果的方法：首先创建一个HTML示例文件；然后创建一个正方形的...

99+

2023-06-14
css实现阴影效果的方法

这篇文章主要介绍了css实现阴影效果的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。方法：1、使用text-shadow属性，语法“text-shadow: 水平阴影垂...

99+

2023-06-14
css中常见的链接样式有哪些

这篇文章主要介绍css中常见的链接样式有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！链接按照其形状扭转色调。让我们看看另外几种思空见贯的设置链接名堂的法子：文本润色...

99+

2024-04-02