Windows 10 startup loading only HTML & CSS

Windows startup loading is a common thing.
Whenever we start our computer we get the loading of windows.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="plate_wrapper">
        <span></span><span></span><span></span><span></span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" class="lds-microsoft" width="80px" height="80px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="rotate(0)"><circle cx="81.73413361164941" cy="74.35045716034882" fill="#ffffff" r="5" transform="rotate(340.001 49.9999 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="0s"/>
      </circle><circle cx="74.35045716034882" cy="81.73413361164941" fill="#ffffff" r="5" transform="rotate(348.352 50.0001 50.0001)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.0625s"/>
      </circle><circle cx="65.3073372946036" cy="86.95518130045147" fill="#ffffff" r="5" transform="rotate(354.236 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.125s"/>
      </circle><circle cx="55.22104768880207" cy="89.65779445495241" fill="#ffffff" r="5" transform="rotate(357.958 50.0002 50.0002)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.1875s"/>
      </circle><circle cx="44.77895231119793" cy="89.65779445495241" fill="#ffffff" r="5" transform="rotate(359.76 50.0064 50.0064)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.25s"/>
      </circle><circle cx="34.692662705396415" cy="86.95518130045147" fill="#ffffff" r="5" transform="rotate(0.183552 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.3125s"/>
      </circle><circle cx="25.649542839651176" cy="81.73413361164941" fill="#ffffff" r="5" transform="rotate(1.86457 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.375s"/>
      </circle><circle cx="18.2658663883506" cy="74.35045716034884" fill="#ffffff" r="5" transform="rotate(5.45126 50 50)">
        <animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;360 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s" begin="-0.4375s"/>
      </circle><animateTransform attributeName="transform" type="rotate" calcMode="spline" values="0 50 50;0 50 50" times="0;1" keySplines="0.5 0 0.5 1" repeatCount="indefinite" dur="1.5s"/></g></svg>
</body>
</html>

for svg we collected it from Loading.io

CSS

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 500px;
    height: 100vh;
}
.plate_wrapper{
    width: 200px;
    height: 180px;
    transform: rotateY(-33deg);
}
.plate_wrapper span{
    background: #00E7FF;
    display: inline-block;
    width: 50%;
    height: 50%;
}
.plate_wrapper span:nth-child(odd){
    border-right: 4px solid #000;
}
svg{
    position: absolute;
    bottom: 10%;
    transform: scale(.7);
}

If you need more kind of tutorial stay with me,
I will do more tutorials with HTML and CSS only.
Thanks.

Blog

Windows 10 startup loading only HTML & CSS

Nikhil Chandra Roy

Windows 10 startup loading only HTML & CSS

Join Our Newsletter. No Spam, Only the good stuff.

Related