Home > Article > Web Front-end > Detailed explanation of examples of using spin.js to generate waiting effects

Detailed explanation of examples of using spin.js to generate waiting effects

零下一度Original: 2017-06-27 16:17:251986browse

This article mainly introduces the use of spin.js to generate a waiting effect (js waiting effect). Friends who need it can refer to

Use js to generate a user-friendly waiting effect, using the jquery plug-in spin.js , there is a download address at the end of the article. The picture below is a screenshot of the generated effect. The code call is very simple.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
 font-family: Helvetica, Arial, sans-serif; font-size: 12px;
}
#preview1 {
 float: left; position: relative; background-color: #000; color: black; width: 220px; height: 220px; margin: 0 5px; border-radius: 20px;
}
#preview2 {
 float: left; position: relative; background-color: #000; color: black; width: 220px; height: 220px; margin: 0 5px; border-radius: 20px;
}
</style>
<script src="jquery.min.js"></script>
<script src="spin.js"></script>
<script src="jquery.spin.js"></script>
<script type="text/javascript">
 // 对样式 #preview1 进行配置
 var opts1 =
 {
 lines : 12, // The number of lines to draw
 length : 0, // The length of each line
 width : 11, // The line thickness
 radius : 40, // The radius of the inner circle
 scale : 1.0, // Scales overall size of the spinner
 corners : 0, // Roundness (0..1)
 color : &#39;#efefef&#39;, // #rgb or #rrggbb
 opacity : 1 / 4, // Opacity of the lines
 rotate : 0, // Rotation offset
 direction : 1, // 1: clockwise, -1: counterclockwise
 speed : 1, // Rounds per second
 trail : 100, // Afterglow percentage
 fps : 20, // Frames per second when using setTimeout()
 zIndex : 2e9, // Use a high z-index by default
 className : &#39;spinner&#39;, // CSS class to assign to the element
 top : &#39;50%&#39;, // center vertically
 left : &#39;50%&#39;, // center horizontally
 shadow : false, // Whether to render a shadow
 hwaccel : false, // Whether to use hardware acceleration (might be buggy)
 position : &#39;absolute&#39; // Element positioning
 };
 // 对样式 #preview2 进行配置
 var opts2 =
 {
 lines : 18, // The number of lines to draw
 length : 0, // The length of each line
 width : 11, // The line thickness
 radius : 40, // The radius of the inner circle
 scale : 1.0, // Scales overall size of the spinner
 corners : 0, // Roundness (0..1)
 color : &#39;red&#39;, // #rgb or #rrggbb
 opacity : 1 / 4, // Opacity of the lines
 rotate : 0, // Rotation offset
 direction : 1, // 1: clockwise, -1: counterclockwise
 speed : 1, // Rounds per second
 trail : 100, // Afterglow percentage
 fps : 20, // Frames per second when using setTimeout()
 zIndex : 2e9, // Use a high z-index by default
 className : &#39;spinner&#39;, // CSS class to assign to the element
 top : &#39;50%&#39;, // center vertically
 left : &#39;50%&#39;, // center horizontally
 shadow : false, // Whether to render a shadow
 hwaccel : false, // Whether to use hardware acceleration (might be buggy)
 position : &#39;absolute&#39; // Element positioning
 };
</script>
<title>Insert title here</title>
</head>
<body>
 <p id="preview1" class="preview"></p>
 <p id="preview2" class="preview"></p>
</body>
<script type="text/javascript">
 $(&#39;#preview1&#39;).spin(opts1);
 $(&#39;#preview2&#39;).spin(opts2);
</script>
</html>

The above is the detailed content of Detailed explanation of examples of using spin.js to generate waiting effects. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief introduction to the get and post methods in axiosNext article：A brief introduction to the get and post methods in axios

See more

Detailed explanation of examples of using spin.js to generate waiting effects

Related articles