Örnek:
HTML Dosyası
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="css.css" rel="stylesheet" />
<script type="text/javascript">
function func() {
var spanProgress = document.getElementById('progressSpan');
progressWidth = "100%";
spanProgress.style.width = progressWidth;
}
</script>
</head>
<body>
<div class="progress efect" >
<span id="progressSpan" style="width: 0%"></span>
</div>
<input type="button" value="progress" onclick="func()" />
</body>
</html>
.progress{
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
border-radius: 5px;
}
.efect{
}
.progress span{
display: inline-block;
height: 100%;
border-radius: 3px;
background-color: #008000;
transition-property: width;
transition-duration: 10s;
}
.efect span{
background-size: 30px 30px;
background-image: linear-gradient(135deg,rgba(255,255,255,.15)25%,
transparent 25%,transparent 50%,
rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent 75%,transparent);
animation: animation-efect 3s linear infinite;
}
@keyframes animation-efect{
0%{
background-position: 0px 0;
}
100%{
background-position: 60px 0;
}
}
No comments:
Post a Comment