Home > Developer > Web Develop
<! DOCTYPE html>
<TITLE>CSS3 Laser Loading Strips </title>
<meta charset= "Utf-8"/>
<script src= "Http://libs.baidu.com/jquery/1.10.2/jquery.min.js" ></script>
<style type= "Text/css" >
/* Simply clear the browser style */
*{
margin:0px;
padding:0px;
}
/* Set progress bar height, background color */
#process {
height:2px;
Background: #1abc9c;
Transform:opacity 300ms linear;
-webkit-animation:myprocess 3s;/* Animation Binding */
Animation:myprocess 3s;
}
/* Use CSS3 to create animation rules */
@-webkit-keyframes myprocess{
0%{width:0px;}
100%{width:100%;}
}
@keyframes myprocess{
0%{width:0px;}
100%{width:100%;}
}
. over{
opacity:0;
}
/**
Internet Explorer 10, Firefox, and Opera support @keyframes rules and animation properties.
Chrome and Safari need a prefix of-webkit-.
Note: Internet Explorer 9, and earlier versions, do not support @keyframe rules or animation properties
Source: http://www.w3cschool.cc/
**/
</style>
<script type= ' Text/javascript ' >
$ ({timer:0}). Animate ({timer:100},//from 0-100
{
duration:3000,//speed setting,
A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)
Step:function () {//step function
var percentage = Math.Round (This.timer); Take the value of every tick of the timer and do the whole exercise.
$ (' #process '). CSS (' width ', percentage + "%");
if (percentage = = 100) {
$ ("#process"). AddClass ("over"); When loading is complete, hide the process
}
}
});
</script>
<body>
<div id= "Process" > </div>
</body>
A laser strip made by HTML5
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
