纯CSS加载中代码示例

最新推荐文章于 2023-06-02 08:57:01 发布

Bonjours

最新推荐文章于 2023-06-02 08:57:01 发布

阅读量295

点赞数

分类专栏：前端文章标签：加载中 css加载中

本文链接：https://blog.csdn.net/Bonjours/article/details/103661880

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <title>加载中示例</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="cache-control" content="no-cache">
</head>
<style type="text/css">
    .app-preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #27283a; /* Old browsers */ background: -moz-linear-gradient(top, #27283a 0%, #282b3f 50%, #3d3f5a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #27283a 0%, #282b3f 50%, #3d3f5a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #27283a 0%, #282b3f 50%, #3d3f5a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27283a', endColorstr='#3d3f5a', GradientType=0); z-index: 100500; } @-webkit-keyframes uil-ring-anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes uil-ring-anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes uil-ring-anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes uil-ring-anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes uil-ring-anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

    .app-preloader__circle { background: none; position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; text-align: center; }

    .app-preloader__circle-inner { position: absolute; display: block; width: 160px; height: 160px; top: 20px; left: 20px; border-radius: 80px; box-shadow: 0 3px 0 0 #32ba94; -webkit-transform-origin: 80px 81.5px; transform-origin: 80px 81.5px; -webkit-animation: uil-ring-anim 1s linear infinite; animation: uil-ring-anim 1s linear infinite; }
</style>
<body>
    <div class="app-preloader">
        <div class="app-preloader__circle">
            <div class="app-preloader__circle-inner"></div>
        </div>
    </div>
</body>
</html>

效果：

Bonjours

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS加载中代码示例

<!DOCTYPE html><html lang="en"><head> <title>加载中示例</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&g...
复制链接

扫一扫