Loading Text Animation

Written by @kerixa 26 March 2021

For the times when users of your website want to download a file and clicks on the download button, you can use the loading effects to show that the download process will start soon and he has to wait a bit. In the following code, loading text is shown in such a way that each letter in the word "loading" is turned on and then off, and the next letter is turned on, in the same way. It continues to the last letter and starts again from the first letter.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: 'Quicksand', sans-serif;
}

body {
    background: #262626;
}

ul {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translate(0,-50%);
}

ul li {
    list-style: none;
    display: inline-block;
    color: rgba(255,255,255,.2);
    font-size: 16px;
    animation: animate 1.3s infinite linear;
}

@keyframes animate {
0% {
    color: rgba(255,255,255,.2);
    text-shadow: none;
}

90% {
    color: rgba(255,255,255,.2);
    text-shadow: none;
}

100% {
    color: #ffbf00;
    text-shadow: 0 0 10px #ffbf00;
}
}

ul li:nth-child(1) {
    animation-delay: .2s;
}

ul li:nth-child(2) {
    animation-delay: .4s;
}

ul li:nth-child(3) {
    animation-delay: .6s;
}

ul li:nth-child(4) {
    animation-delay: .8s;
}

ul li:nth-child(5) {
    animation-delay: 1s;
}

ul li:nth-child(6) {
    animation-delay: 1.2s;
}

ul li:nth-child(7) {
    animation-delay: 1.4s;
}
</style>
<ul>
    <li>L</li>
    <li>O</li>
    <li>A</li>
    <li>D</li>
    <li>I</li>
    <li>N</li>
    <li>G</li>
</ul><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300