loading 实现
时间: 2023-09-25 17:13:16 浏览: 47
在前端开发中,实现 loading 可以通过 CSS 和 JavaScript 来完成,具体方式如下:
1. 使用 CSS 实现 loading 动画:
可以使用 CSS 的动画效果实现 loading 动画,例如使用 @keyframes 定义动画关键帧,然后使用 animation 属性将动画应用到指定元素上。示例代码如下:
```css
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
width: 50px;
height: 50px;
border: 5px solid #ccc;
border-top-color: #999;
border-radius: 50%;
animation: loading 1s linear infinite;
}
```
2. 使用 JavaScript 实现 loading 动画:
可以使用 JavaScript 动态创建 loading 元素,并设置其样式和动画,然后将 loading 元素添加到页面中。示例代码如下:
```javascript
function showLoading() {
// 创建 loading 元素
var loading = document.createElement('div');
loading.className = 'loading';
// 设置 loading 样式和动画
loading.style.width = '50px';
loading.style.height = '50px';
loading.style.border = '5px solid #ccc';
loading.style.borderTopColor = '#999';
loading.style.borderRadius = '50%';
loading.style.animation = 'loading 1s linear infinite';
// 将 loading 元素添加到页面中
document.body.appendChild(loading);
}
function hideLoading() {
// 移除 loading 元素
var loading = document.querySelector('.loading');
if (loading) {
loading.parentNode.removeChild(loading);
}
}
```
以上代码实现了一个简单的 loading 动画,showLoading 函数用于显示 loading,hideLoading 函数用于隐藏 loading。可以根据实际需求调整 loading 的样式和动画。