常见两种的loading样式（css实现）

最新推荐文章于 2024-03-29 18:05:58 发布

yihuoZhou

最新推荐文章于 2024-03-29 18:05:58 发布

阅读量9.1k

点赞数 2

分类专栏： CSS 文章标签： css 动画

本文链接：https://blog.csdn.net/qq_21794603/article/details/71172782

版权

CSS 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

第一种圆形loading，效果图如下：
这里写图片描述
实现的原理是利用CSS中的animation属性，无线循环播放动画能够达到旋转效果。具体的html和css实现代码如下

<!DOCTYPE html>
<html>
<head>
    <title>loading样式1</title>
    <style type="text/css">
        .loading{
            /*固定loading*/
            position: fixed;
            top: 50%;
            left: 50%;
            /*垂直水平居中*/
            margin: -20px 0 0 -20px;
            width: 40px;
            height: 40px;
            border: 2px solid;
            border-color: #333 #333 transparent;
            border-radius: 50%;
            box-sizing: border-box;
            /*动画时间1s，线性变化，无限循环*/
            animation: loading 1s linear infinite;
        }
        @keyframes loading{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="loading"></div>

</body>
</html>

第二种loading的效果图如下所示：
这里写图片描述
实现原理也是利用css中的anmiation属性，具体实现在代码中能很直观的体现，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>loading2</title>
    <style type="text/css">
        .loading{
            position: fixed;
            top: 50%;
            left: 50%;
            margin: -6px 0 0 -48px;
            /*96=(8+4*2)*6*/
            width: 96px;
            height: 12px;
            overflow: hidden;
        }
        .loading .bar{
            /*176=(8+4*2)*11*/
            width:176px;
            /* 分成5步的动画来移动进度条 */
            animation: loading 1s steps(5,end) both infinite;
        }
        /*float元素的外边距不会合并*/
        .bar i{width: 8px;height: 4px;float: left;margin: 4px;background:#aaa;}
        /*设置第六个点高亮，这个点的两边都有5个点*/
        .bar i:nth-child(6){transform: scale(1.5);background:#333;}
        @keyframes loading{
            /*将第六个点移动到第一个点的位置*/
            0%{transform: translate(-80px);}
            80%,100%{transform: translate(0px);}

        }
    </style>
</head>
<body>
    <div class="loading">
        <div class="bar">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</body>
</html>

这两种实现方法是为练习使用，没考虑兼容性问题，但在高版本的浏览器中都能实现效果图，具体的兼容性说明可参考MDN或w3cshool。

yihuoZhou

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
常见两种的loading样式（css实现）

第一种圆形loading，效果图如下：实现的原理是利用CSS中的animation属性，无线循环播放动画能够达到旋转效果。具体的html和css实现代码如下<!DOCTYPE html><html><head> <title>loading样式1</title> <style type="text/css"> .loading{
复制链接

扫一扫