Build anything

Build Project Quickly which you want, earnestly.

Learning to program is like learning a new language; it opens up a world of endless possibilities,
where you can create, innovate, and solve problems with just your imagination and a
few lines of code.

Download Code

Project title : Loading Page with gray one side

The webpage is being loaded with a grey background, with one side. The grey color scheme creates a neutral backdrop for .... Read more

Uploaded: 2024-06-22 23:43:09

Technology uses

  • HTML
  • CSS
    • Sandeep Kumar

    Discription of Loading Page with gray one side

    The webpage is being loaded with a grey background, with one side. The grey color scheme creates a neutral backdrop for the content to stand out, providing a clean and modern aesthetic to the page.The use of grey as the background color helps to reduce eye strain and create a serene effect for the viewer, allowing them to focus more easily on the content being presented. the layout is organized and structured, making it easier for users to navigate and consume the information provided. This design choice ensures that the content is easily accessible and does not overwhelm the viewer with too much information at once.To add a touch of visual interest, you could incorporate a subtle animation within the grey background. Perhaps a gradient that slowly shifts color, or a faint wave pattern that ripples gently.

    Steps to run the project on your system.

  • Download the Project file on your system.
  • Unzip Downloaded file
  • Open Unzip file
  • Find Index.html file
  • Double tap on index.html.
  • or right click and open with chrome or other browser.
  • Finished

    • Without Download project file you can build, by Copy the below code.

    All code for this project

    All code 

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading page</title>
    <style>
        @keyframes rotateAnimation {
            from {
                transform: rotate(0deg);
                /* Start rotation from 0 degrees */
            }

            to {
                transform: rotate(360deg);
                /* End rotation at 360 degrees */
            }
        }

        body{
            margin:0px;
            padding:0px;
            width:100%;
            height:100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(255, 255, 255);
        }

        .loading {
            width:150px;
            height:150px;
            border-radius:50%;
            border:10px solid;
            border-color: white;
            border-bottom-color:gray;
            border-left-color:gray;
            border-right-color:gray;
         
            animation: rotateAnimation 4s linear infinite;
        }
    </style>
</head>

<body>
    
        <div class="loading">
           
        </div>
    
</body>

</html>

    Recent Uploaded

    The webpage is being loaded, displaying the letter name against a backdrop of a crisp white background.providing ample i .......

    $0
    free download

    The webpage is being loaded with the website name displayed in bold letters against a sleek black background.providing i .......

    $0
    free download

    he webpage is being loaded with a prominent letter 'S' displayed against a sleek black background. The contrast between .......

    $0
    free download