(编辑:jimmy 日期: 2024/12/23 浏览:2)
功能:发送网络请求时等待加载的圈圈动态显示,网络请求成功后关闭提示圈圈
代码:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css画动态等待转圈效果</title> <link rel="stylesheet" href="public/index.css" rel="external nofollow" > </head> <style type="text/css"> .toast { display: none; position: fixed; flex-direction: column; justify-content: center; align-items: center; width: 18rem; height: 18rem; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #4A4A4B; border-radius: 1rem; color: #f0f0f0; font-size: 2.5rem; } .load { display: inline-block; margin-bottom: 1.5rem; height: 4rem; width: 4rem; border: 0.4rem solid transparent; border-top-color: white; border-left-color: white; border-bottom-color: white; animation: circle 1s infinite linear; -webkit-animation: circle 1s infinite linear; /* Safari 和 Chrome */ border-radius: 50% } @-webkit-keyframes circle { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg) } } </style> <body> <div class="toast"> <span class="load"></span> <span>加载中...</span> </div> <script src="/UploadFiles/2021-04-02/jquery.min.js">效果: