CSS Loading Screen

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>


    <div class="box"></div>

    <div class="loader"></div>


</body>
</html>

// CSS File

/* .box{
    background-color: orangered;
    height: 100px;
    width: 100px;
    margin: 300px auto;
    animation-name: rotating;
    animation-duration: 3s;
    animation-fill-mode: forwards;  
    animation-iteration-count: infinite;
    animation-direction: reverse;
   
}

@keyframes rotating{

    from{

    }

    to{
       
        height: 0;
        width: 0;
        transform: rotate(170deg);
        background-color: blueviolet;
        border-radius: 50%;
       
       

    }


} */

.loader{
    border-radius: 50%;
    /* background-color: rgb(255, 255, 255); */
    height: 40px;
    width: 40px;
    margin: 100px auto;
   
    border: 4px solid rgb(255, 255, 255);
    border-top:4px solid rgb(36, 80, 255);
   
    animation-name: loader;
    animation-iteration-count: infinite;
    animation-duration: 2s;

}

@keyframes loader{

    from{}
    to{

        transform: rotate(360deg);

    }

}

output:-





Comments

Post a Comment

Popular posts from this blog

Array Mapping and Filters Assignment

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >         < title >Document</ title > </ head > < body >         < script src = "am.js" ></ script > </ body > </ html > // JAVA SCRIPT FILE const users = [     {         name : "Akash Sharma" ,         age : 17 ,         gender : "Male" ,         location : "Delhi, India"     },     {         name : "Neha Patel" ,         age : 16 ,         gender : "Female" ,         location : "Mumbai, India"     },     {         name : "Rajesh Singh" ,     ...
Read more

Rolling Dice

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < div class = "container" >         < audio id = "diceaudio" src = "dice.mp3" ></ audio >         < h1 class = "heading" >Roll The Dice To Get Random Number</ h1 >         < p class = "desc" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, eligendi.</ p >         < div id = "dice" >6</ div >         < div class = "button" onclick = " roll ()" >Roll The Dice</ div >     </ div >     ...
Read more

Basics Of Java Script Till DOM Beggining

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < div class = "container" >         < h1 id = "title" >Welcome to css</ h1 >         < button id = "btn" class = "btn" onclick = " feedback ()" >Give Feedback</ button >         < input id = "inp1" type = "text" placeholder = "Enter Name" >         < input id = "inp2" type = "text" placeholder = "Enter Number" >     </ div >     < script src = "app.js" >         </ script >     </ body > </ html ...
Read more