移动端loading效果实现

最新推荐文章于 2023-10-30 13:33:57 发布

樊一翻

最新推荐文章于 2023-10-30 13:33:57 发布

阅读量1.7k

点赞数

分类专栏：前端 loading

本文链接：https://blog.csdn.net/qq_38147456/article/details/84134880

版权

前端同时被 2 个专栏收录

44 篇文章 3 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

css:

.my-toast {
            position: fixed;
            z-index: 5000;
            width: 120px;
            min-height: 120px;
            top: 50%;
            left: 50%;
            background: hsla(0, 0%, 7%, .7);
            text-align: center;
            border-radius: 5px;
            color: #fff;
            -webkit-transition-duration: .2s;
            transition-duration: .2s;
            opacity: 1;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }
        .my-icon_toast.my-loading {
            margin: 30px 0 0;
            width: 38px;
            height: 38px;
            vertical-align: baseline;
        }

        .my-icon_toast {
            font-size: 55px;
            color: white;
            margin-bottom: 6px;
        }
        @-webkit-keyframes e {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }

            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn)
            }
        }
        @keyframes e {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }

            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn)
            }
        }
        .my-loading {
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            -webkit-animation: e 1s steps(12) infinite;
            animation: e 1s steps(12) infinite;
            background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;
            background-size: 100%
        }

js:(记得引入jQuery)

function showMyLoading(){
	$('body').append(`<div class="my-toast my_loading_toast my-toast--visible"><div class="my_loading"><i class="my-loading my-icon_toast"></i></div><p class="my-toast_content">数据加载中</p></div>`);
}
function hideMyLoading(){
	$('.my-toast').remove();
}
$(function(){
	showMyLoading();
	setTimeout(function(){
		hideMyLoading();
	},1500)
})