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.
Top comments (0)