angular 自定义首页加载动画

在 index.html 中,用 app-root 标签,angular在页面加载完成后将该标签替换清除,所以可以在app-root中设置自己的加载文字或者动画。

比如:

<app-root>加载中...</app-root>

将在加载时显示 加载中…

 

也可以在设置加载动画。

CSS loader

代码如下:

<app-root>
    <style>

    .loader {
        position: absolute;
        top: 50%;
        left: 40%;
        margin-left: 10%;
        transform: translate3d(-50%, -50%, 0);
    }
    .dot {
        width: 24px;
        height: 24px;
        background: #3ac;
        border-radius: 100%;
        display: inline-block;
        animation: slide 1s infinite;
    }
    .dot:nth-child(1) {
        animation-delay: 0.1s;
        background: #32aacc;
    }
    .dot:nth-child(2) {
        animation-delay: 0.2s;
        background: #64aacc;
    }
    .dot:nth-child(3) {
        animation-delay: 0.3s;
        background: #96aacc;
    }
    .dot:nth-child(4) {
        animation-delay: 0.4s;
        background: #c8aacc;
    }
    .dot:nth-child(5) {
        animation-delay: 0.5s;
        background: #faaacc;
    }
    @-moz-keyframes slide {
        0% {
        transform: scale(1);
        }
        50% {
        opacity: 0.3;
        transform: scale(2);
        }
        100% {
        transform: scale(1);
        }
    }
    @-webkit-keyframes slide {
        0% {
        transform: scale(1);
        }
        50% {
        opacity: 0.3;
        transform: scale(2);
        }
        100% {
        transform: scale(1);
        }
    }
    @-o-keyframes slide {
        0% {
        transform: scale(1);
        }
        50% {
        opacity: 0.3;
        transform: scale(2);
        }
        100% {
        transform: scale(1);
        }
    }
    @keyframes slide {
        0% {
        transform: scale(1);
        }
        50% {
        opacity: 0.3;
        transform: scale(2);
        }
        100% {
        transform: scale(1);
        }
    }

    </style>
    <div class="loader">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</app-root>

 

发表评论