How To Create A Custom Preloading Screen

Related Screencast

IMAGE

// source code

<!DOCTYPE html>                                                   

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,

  initial-scale=1.0">

    <title>Document</title>

    <style>

*{

            margin: 0;

            padding: 0;

}

        #perlodar{

            width: 100%;

            height: 100%;

            background: #000;

            position: fixed;

}

        .loader{

            width: 40px;

            height: 40px;

            /* background: red; */

            border-radius: 60px;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            position: absolute;

            animation: loader 0.8s linear infinite;

}

        @keyframes loader {

0%{

                transform: rotate(0deg);

                border: 4px solid #F44336;

                border-left-color: transparent;

}

            50%{

                transform: rotate(180deg);

                border: 4px solid #6734b7;

                border-left-color: transparent;

}

            100%{

                transform: rotate(360deg);

                border: 4px solid  #F44336;

                border-left-color: transparent;

}

}

    </style>

</head>

<body>

    <div id="perlodar">

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

    </div>

</body>.     

</html>

BABATECHNICAL