Html Code: Loading Text Animation

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.

<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<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;font-family:Tahoma">HTML Best Codes</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: Loading Text Animation

Links