SOURCE

$('#getApi').click(function(){
        $('.csshub-loading-icon').css("display","block");
        setTimeout(function(){
            $.ajax({
                url:"http://api.jirengu.com/weather.php",
                dataType:"json",
                async:true,
                success:function(data) {
                    $(document.body).css("background", "#66FFFF")
                    console.log(data);
                    //时间
                    var _date = data.date;
                    console.log(_date);
                    $($('.time')[0]).html("北京时间: " + _date);
                    //城市
                    var _city = data.results[0].currentCity;
                    console.log(_city);
                    $($('.city')[0]).html("当前城市: " + _city);
                    //pm2.5
                    var _pm25 = data.results[0].pm25;
                    $($('.pm25')[0]).html("PM指数: " + _pm25);
                    //详情
                    var _detail = "";
                    _detail += `<div class="remind">温馨提醒:</div>`
                    $.each(data.results[0].index, function (i, item) {
                        console.log(item);
                        _detail += `<div class="des">${item.des}</div>`;
                    })
                    $($('.detail')[0]).html(_detail);
                    console.log(data.results[0].weather_data)
                    var weatherData = data.results[0].weather_data;
                    $.each(weatherData, function (i, item) {
                        console.log(item);
                    })
                    $('.csshub-loading-icon').css("display","none");
                }
            })
        },1000)

    })

<div class="bg">
    <div class="csshub-loading-icon"></div>
</div>

<button id="getApi">
    查看当前城市天气情况
</button>
<div class="weather">
    <div class="time"></div>
    <div class="city"></div>
    <div class="pm25"></div>
    <div class="detail"></div>
</div>

*{
            margin: 0;
        }
        body{
            padding: 10px;
            position: relative;
        }
        .weather,.weather>div{
            padding: 10px;
        }
        .weather>div>div{
            padding: 10px 0;
        }
        ul,li{
           margin:0;
           padding: 0;
           list-style: none;
        }
        a{
            text-decoration: none;
        }
        a:hove{
            text-decoration: none;
        }
        .remind{
            color:#03a9f4
        }
        .des{
            color:#9966FF;
        }
        .csshub-loading-icon{
            padding:10px;
            width:10px;
            height:10px;
            border-top:20px solid #ED5548;
            border-right:20px solid #599CD3;
            border-bottom: 20px solid #5CBD5E;
            border-left:20px solid #FDD901;
            background:transparent;
            display: none;
            position: absolute;
            top:50%;
            left:50%;
            -webkit-animation: csshub-rotate-right-round 1200ms ease-in-out infinite  alternate ;
            animation: csshub-rotate-right-round 1200ms ease-in-out infinite  alternate ;
        }
        @-webkit-keyframes csshub-rotate-right-round
        {
            0% { -webkit-transform: rotate(0deg);}
            50% {-webkit-transform: rotate(180deg); }
            100% {-webkit-transform: rotate(360deg);-webkit-border-radius:50%;}
        }

        @keyframes csshub-rotate-right-round
        {
            0% { transform: rotate(0deg);}
            50% {transform: rotate(180deg); }
            100% {transform: rotate(360deg);border-radius:50%;}
        }