Cara membuat Simple Loader pertama tama kita siap kan file nya yang bernama index.html
index.html
<!-- created by : SwapniL -->
<!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>Simple Loader</title>
<!-- CSS rules (start) -->
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* CSS rule for base */
.base{
height: 300px;
width: 300px;
display: flex;
align-items: center;
justify-content: center;
}
/* CSS rule for circles */
.circle{
height: 200px;
width: 200px;
border-radius: 50%;
border: 2px solid teal;
position: absolute;
}
/* CSS rule specially for circle one */
.one{
animation: rotatePositive 3s linear infinite;
}
/* CSS rule specially for circle two */
.two{
animation: rotateNegative 3s linear infinite;
}
/* keyframes for circle one */
@keyframes rotatePositive {
0%{
transform:
rotateX(45deg) rotateY(0deg);
}
100%{
transform:
rotateX(45deg) rotateY(360deg);
}
}
/* keyframes for circle two */
@keyframes rotateNegative {
0%{
transform:
rotateX(-45deg) rotateY(0deg);
}
100%{
transform:
rotateX(-45deg) rotateY(360deg) ;
}
}
/* CSS rules for youtube link (start) */
.yt{
height : 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 20px;
color : white;
}
.yt > a{
display : flex;
align-items : center;
text-decoration : none;
font-weight: bold;
border-radius: 0.5em;
padding: 0.8em 1em;
border: 1px solid purple;
background-color: purple;
color : white;
}
/* CSS rules for youtube link (end) */
</style>
<!-- CSS rules (end) -->
</head>
<body>
<div class="base">
<div class="circle one"></div>
<div class="circle two"></div>
</div>
<!-- markup for youtube link (starts) -->
<div class="yt">
<a href="https://www.tiktok.com/@tiktokweb97/video/7313923692977802501?is_from_webapp=1&sender_device=pc&web_id=7241108422586107399"
target="_blank">akun tiktok</a>
</div>
<!-- markup for youtube link (ends) -->
</body>
</html>
Sekarang kita coba jalankan maka hasil nya akan seperti ini.
Comments