完美的loading的实现方法

以下是我对于完美的loading实现方法的完整攻略：

1、使用CSS实现loading

使用CSS实现loading是最简单的方法之一，可以使用CSS3的animation属性实现loading的动画效果，可以通过一些技巧实现loading的居中，在这里我给出一个实现loading的示例代码:

<div class="loading">
  <div class="loading-item"></div>
  <div class="loading-item"></div>
  <div class="loading-item"></div>
  <div class="loading-item"></div>
</div>

.loading{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.loading-item{
    width: 15px;
    height: 15px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #000;
    animation: loading 1s linear infinite;
}

@keyframes loading {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

2、使用JavaScript实现loading

使用JavaScript实现loading的方式相对较为复杂，但是可以实现更加灵活多样的loading动画效果。具体实现方法是使用JavaScript动态创建loading元素，并在需要展示loading的时候将其插入到DOM中显示，加载完成后再将其移除。在这里我提供一个使用JavaScript实现loading的示例代码：

<div class="container">
</div>

<div class="loading">
  <div class="loading-item"></div>
  <div class="loading-item"></div>
  <div class="loading-item"></div>
  <div class="loading-item"></div>
</div>

.loading{
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.loading-item{
    width: 15px;
    height: 15px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #000;
    animation: loading 1s linear infinite;
}

@keyframes loading {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

const loadingElement = document.createElement('div');
loadingElement.innerHTML = `
  <div class="loading">
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
    <div class="loading-item"></div>
  </div>
`;
document.querySelector('.container').appendChild(loadingElement);

// 模拟数据加载时间2s
setTimeout(() => {
  loadingElement.remove();
}, 2000);

以上是我对于完美的loading的实现方法的两条简单示例，可以根据具体需求进行选择使用。