如何使用 CSS 创建高级加载屏幕？

在本文中，我们将构建一个高级版本的波浪状结构，用于使用 HTML 和 CSS 加载屏幕。当某个页面需要几秒钟来加载网页内容时，加载屏幕很有用。如果某个网页不包含加载屏幕，那么在加载网页时，用户可能会认为该网页根本没有响应。因此，这种方式可以有效地使用户分心或等待几秒钟直到页面完全加载。通过这种方式，用户可以在更长的时间内与网页互动。

CSS 加载屏幕

方法：

• 声明具有加载类的div元素。在 div 元素内，声明h2标签以显示加载百分比。
• 在 CSS 部分，在加载类中添加border-radius属性，同时使位置相对。
• 将height和width属性设置为相等，并给定一个边框半径来设置圆角。然后，使用@keyframe属性为其分配一个旋转动画，为浏览器创建动画/过渡效果。
• 将div元素的overflow属性设置为hidden，这样只有div里面的部分是可见的，模拟加载画面。

示例：此示例描述了具有波浪状结构的 CSS 加载屏幕。

HTML

  

    
    

  

    
GeeksforGeeks
    

        
75%
    

  

输出：

CSS 加载屏幕