مینی پروژه ی progress bar
6
سلام دوستان و استاد صالحی عزیز
من یه progress bar طراحی کردم ولی میدونم که روش های خیلی بهتری هم برای اجراش هست و این راهیه که به ذهن من رسید
ممنون میشم مشارکت کنید و بگید به چه روش های دیگه ای میشه همچین کاری کرد
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<span>Loading</span>
<span id="ok"> ✓</span>
<div class="loading"></div>
</div>
</body>
</html>style.css
.container{
margin: 0px;
width: 600px;
height: 50px;
border: double black 2px;
text-align: center;
position: absolute;
transform: translateX(-50%);
left: 50%;
font-size: xx-large;
border-radius: 15px;
}
.container span{
animation: colorchange 0s linear;
animation-fill-mode: forwards;
animation-delay: 2s;
}
.container #ok{
opacity: 0;
animation: ok 0s linear;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.loading{
border-radius: 13px;
position: relative;
transform: translateY(-43px);
width: 10px;
height: 50px;
background-color: #333;
animation: loading 2s linear;
animation-fill-mode: forwards;
z-index: -1;
}
@keyframes colorchange{
from{
color: black;
}
to{
color: greenyellow
}
}
@keyframes ok{
from{
opacity: 0;
}
to{
opacity: 1;
color: greenyellow;
}
}
@keyframes loading{
from{
width: 10px;
}
to{
width: 600px;
}
}
3
حذف شده
خیلی خوبه البته ۱۰ ها روش و استایل برای هر ایده ای وجود داره و هر کس ممکنه از طرح خاصی خوشش بیاد و اینکه خودتون رو به چالش می کشید خیلی خوبه ...
0
حذف شده
سلام خیلی عالی بود
اما واقعا بدون جاوا اسکریپت نمیشه این ها رو کنترل کرد
به نظر من در کنار اموزش طراحی وب جاوا اسکریپت هم یاد بگیرید تا بتونید صفحات بهتری بسازید
برای پاسخ دادن به این سوال شما باید در دوره عضو باشید .