Web
Analytics
Skip to content

Concrete5

на русском языке

Классное понятное сообщение о загрузке взятое с CodePen. Мне кажется, что лучше писать, чем запускать вращающиеся кружки или двигающиеся полосы. Многие люди еще их не понимают, особенно, пожилые. Семантически конечно неправильно использовать тег H1, лучше заменить на параграф или фрагмент. 

<div class="container">
        <h1>загружаю...</h1>
 </div>

Поиграть со стилями в CodePen

:root {
    --text-color: orangered;
    --inner-stroke-color: white;
    --outer-stroke-color: midnightblue;
    --shadow-color: midnightblue;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Pacifico', cursive;
}

body,
.container>h1 {
    margin: 0;
}

.container>h1 {
    position: relative;
    font-size: 100px;
    color: var(--text-color);
    font-weight: normal;
    line-height: 1;
    text-transform: capitalize;
    letter-spacing: 13px;
    --text-stroke: 2px var(--inner-stroke-color);
    -webkit-text-stroke: var(--text-stroke);
    text-stroke: var(--text-stroke);
    animation: rise 1s ease-in-out infinite forwards;
}

.container>h1:after {
    content: 'загружаю...';
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    --text-stroke: 8px var(--outer-stroke-color);
    -webkit-text-stroke: var(--text-stroke);
    text-stroke: var(--text-stroke);
    z-index: -1;
    animation: drop 1s ease-in-out infinite forwards;
}

@keyframes drop {
    0% {
        filter: drop-shadow(-5px -5px 0 var(--shadow-color));
    }
    50% {
        filter: drop-shadow(5px 5px 0 var(--shadow-color));
    }
    100% {
        filter: drop-shadow(-5px -5px 0 var(--shadow-color));
    }
}

@keyframes rise {
    0% {
        transform: translate(5px, 5px);
    }
    50% {
        transform: translate(-5px, -5px);
    }
    100% {
        transform: translate(5px, 5px);
    }
}

загружаю...


Загрузка беседы