web前端开发

您现在的位置是:首页>前端开发

CSS

如何制作CSS Loader?

admin:杨小二时间:2020-07-09 17:21:24前端开发0次
当某个页面花了几秒钟来加载网页内容时,CSS加载器很有用。当用户不得不等待内容完全加载到网页上时。如果某个网页没有CSS的加载器,则加载时间用户会认为该网页根本没有响应。因此,将CSS加载程序放在网页上会使用户分心或等待几秒钟,直到页面完全加载为止。CSS可用于在网页上设置样式和添加动画以及其他视觉运动图形。以下代码说明了CSS下的动画演示。

当某个页面花了几秒钟来加载网页内容时,CSS加载器很有用。当用户不得不等待内容完全加载到网页上时。如果某个网页没有CSS的加载器,则加载时间用户会认为该网页根本没有响应。因此,将CSS加载程序放在网页上会使用户分心或等待几秒钟,直到页面完全加载为止。CSS可用于在网页上设置样式和添加动画以及其他视觉运动图形。以下代码说明了CSS下的动画演示。 示例1:

 

本示例使用CSS创建CSS加载器。

 

<!DOCTYPE html>

<html>

  

<head>

    <title>css loader</title>

    <style>

        h1{

            color:green;

        }

        .gfg {

            display: block;

            position: absolute;

            width: 10px;

            height: 10px;

            left: calc(50% - 1em);

            border-radius: 1em;

            transform-origin: 1em 2em;

            animation: rotate;

            animation-iteration-count: infinite;

            animation-duration: 1.8s;

        }

  

        /* Rotation of loader dots */

        @keyframes rotate {

            from {

                transform: rotateZ(0deg);

            }

            to {

                transform: rotateZ(360deg);

            }

        }

        .g1 {

            animation-delay: 0.1s;

            background-color: #1D8348;

  

        }

        .g2 {

            animation-delay: 0.2s;

            background-color: #239B56;

        }

        .g3 {

            animation-delay: 0.3s;

            background-color: #2ECC71;

        }

        .g4 {

            animation-delay: 0.4s;

            background-color: #82E0AA ;

        }

        .g5 {

            animation-delay: 0.5s;

            background-color: #D5F5E3;

        }

    </style>

</head>

  

<body>

    <center>

        <h1>GeeksforGeeks</h1>

        <h4>CSS Loader</h4>

        <div class='loader'>

            <div class='gfg g1'></div>

            <div class='gfg g2'></div>

            <div class='gfg g3'></div>

            <div class='gfg g4'></div>

            <div class='gfg g5'></div>

        </div>

    </center>

</body>

  

</html>

 

输出:

示例2:本示例使用CSS创建CSS加载器。

 

<!DOCTYPE html>
<html>
  
<head>
    <title>css loader</title>
    <style>
        h1{
            color:green;
        }
        .gfg {
            display: block;
            position: absolute;
            width: 100px;
            height: 10px;
            left: calc(58% - 5em);
            transform-origin: 1px 10px;
            animation: rotate;
            animation-iteration-count: infinite;
            animation-duration: 2.8s;
        }
  
        /* Rotation of loader dots */
        @keyframes rotate {
            from {
                transform: rotateY(50deg);
            }
            to {
                transform: rotateY(360deg);
            }
        }
        .g1 {
            animation-delay: 0.1s;
            background-color: #1D8348;
        }
        .g2 {
            animation-delay: 0.2s;
            background-color: #239B56;
        }
        .g3 {
            animation-delay: 0.3s;
            background-color: #2ECC71;
        }
        .g4 {
            animation-delay: 0.4s;
            background-color: #82E0AA ;
        }
        .g5 {
            animation-delay: 0.5s;
            background-color: #D5F5E3;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h4>CSS Loader</h4>
        <div class='loader'>
            <div class='gfg g1'></div>
            <div class='gfg g2'></div>
            <div class='gfg g3'></div>
            <div class='gfg g4'></div>
            <div class='gfg g5'></div>
        </div>
    </center>
</body>
  
</html>  

                  

输出:

平面设计