ads_header

Create Loader Text HTML CSS




Hello guys, this tutorial I will make a simple loader effect using text. So this program will display a word with less clear opacity and slowly become clearer until the written word appears clearly.





First, create a project folder and add the index.html and style.css files in it. When finished open the index.html file and enter the following code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Loader Text</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 data-text="Programming...">Programming...</h1>
</body>
</html>

Next, open style.css and enter the foloowing code


body
{
    margin: 0;
    padding: 0;
    font-family:sans-serif;
   
}

h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 120px;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #f5ebebf1;
}

h1:before{
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: crimson;
    overflow: hidden;
    animation: animate 10s linear infinite;
    border-right: 1px solid #000;
}

@keyframes animate{
    
    0%{
        width: 0;
    }
    50%{
        width:100%;
    }
    100%{
        width:0;
    }
}

Save all files and run index.html

1 comment:

  1. With dedicated hosting, users have complete control over their hosting facilities, including the ability to change all critical settings and take full control of their server. We have chosen the Dedicated Server Hosting USA from which you can choose any preferred dedicated hosting service that meets all of your company's needs and budget.

    ReplyDelete

Powered by Blogger.