حل شده توسط
سحر پاشائی
.course-title{
display: flex;
justify-content: center;
font-weight: bold;
padding: 100px;
font-size: 34px;
color: rgb(57, 58, 58);
}
body{
background-color: rgb(255, 255, 255);
}
.circle-loader{
display: inline-block;
width: 250px;
height: 250px;
border: 2px solid rgb(131, 130, 130);
margin-right: 80px;
border-left-color:rgb(0, 136, 255) ;
border-radius: 50%;
animation: circle-spin 1.2s infinite linear;
}
@keyframes circle-spin {
0%{
transform: rotate(0);}
100%{
transform: rotate(360deg);}
}
.chickmark{
display: none;
}
.chickmark::after{
content: '';
width: 50px;
height: 120px;
border-right: 3px solid rgb(3, 255, 15) ;
border-top: 3px solid rgb(0, 255, 51) ;
opacity: 1;
position: absolute;
transform: rotate(225deg) scaleX(-1);
left: 75px;
top: 120px;
transform-origin: left top ;
animation: chickmark 900ms ease;
}
@keyframes chickmark {
0%{
opacity: 1;
height: 0;
width: 0;
}
30%{
opacity: 1;
height: 0;
width: 50px;
}
100%{
opacity: 1;
height: 120px;
width: 50px;
}
}
.load-complete{
animation: none;
border-color: greenyellow;
transition: border-color 400ms ease-out;
}
</style>
</head>
<body>
<p class="course-title">پروژه شماره 1</p>
<div class="circle-loader ">
<div class="chickmark drow"></div>
</div>
<button class="btn">کلیک کنید</button>
<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.btn').click(function() {
$('.circle-loader').toggleClass('load-complete')
$('.chickmark').toggle();
})
});
</script>
سلام وقت بخیر وقتی کلید میکنم کلاس chickmark کلا از کلاس circle-loader بیرون میره و در جایی دیگر نمایش داده میشود کدها هم به درستی نوشته شده است لطفا برسی کنید ممنون