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 two side dotted with two color

The webpage is loaded.It's separated by two side dots and presented in two different colors.The page is loading with con.... Read more

Uploaded: 2024-06-16 21:46:37

Technology uses

  • HTML
  • CSS
    • Sandeep Kumar

    Discription of Loading Page with two side dotted with two color

    The webpage is loaded.It's separated by two side dots and presented in two different colors.The page is loading with content colored on both sides with dotted lines. 2. The content on the page is flanked by dotted lines of color The screen splits in two, divided by a row of tiny, evenly spaced dots. On one side, a vibrant teal color pops, while the other remains a crisp white.Across the white section, a sleek progress bar stretches, its thin line pulsing faintly with each passing moment. On the teal side, nestled in the corner, sits a small, white coffee cup icon. Below it, text proclaims: "Brewing your perfect one double..." in a clean, modern font.on either side.One double coming right up! " with a slight intensification of the animation before returning to its gentle rhythm.It could be a steaming latte with intricate latte art or details about your newly booked hotel room – all depending on what "one double" represents.But the clean design, engaging visuals, and clear messaging make the wait feel smooth and informative.The contrasting colors ensure the progress and message are easily seen, while the dotted line adds a touch of visual interest.

    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 with shadow</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:180px;
            height:180px;
            border-radius:50%;
            border-bottom:7px;
            border-top:7px;
            border-style: dotted;
            border-color: white;
            border-bottom-color: rgb(153, 43, 226);
            border-top-color: rgb(36, 204, 190);
            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