五十五、openlayers官网示例Loading Spinner解析——给地图添加loading效果，瓦片图层加载时等待效果

官网demo地址：

Loading Spinner 

这篇介绍了一个非常简单的loading效果

利用地图的loadstart和loadend事件，动态的添加和删除class名。

 map.on("loadstart", function () {
     map.getTargetElement().classList.add("spinner");
 });
 map.on("loadend", function () {
     map.getTargetElement().classList.remove("spinner");
 });

配合样式动画实现loading效果

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.spinner:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 50%;
  border: 5px solid rgba(108, 153, 250, 0.8);
  border-to