页面请求加载框，并屏蔽页面点击

1.最近项目的页面一直出现重复点击的问题，因为时间原因，后台也没有做防止重复点击措施，就想着在页面控制吧，加了一个页面加载框，点击提交时，禁止点击页面。

在网上找到的。具体效果如下

2. 看一下网上素材的文件排版

3，我就先贴出css 和 js

两个css文件 global.css 是在线演示全局样式的css 在项目中可以不用引用。loading.css也要注意对项目的影响,因为是网上找到，可能有css冗余

3.1 global.css

@charset "UTF-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline;}html{line-height:1;}ol,ul{list-style:none;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle;}q,blockquote{quotes:none;}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none;}a img{border:none;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}@font-face{font-family:'robotothin';src:url("../../fonts/roboto-thin/roboto-thin.eot");src:url("../../fonts/roboto-thin/roboto-thin.eot?iefix") format("embedded-opentype"),url("../../fonts/roboto-thin/roboto-thin.woff") format("woff"),url("../../fonts/roboto-thin/roboto-thin.ttf") format("truetype"),url("../../fonts/roboto-thin/roboto-thin.svg#robotothin") format("svg");font-weight:normal;font-style:normal;}@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){.border-1px::after{-moz-transform:scaleY(0.65);-ms-transform:scaleY(0.65);-webkit-transform:scaleY(0.65);transform:scaleY(0.65);}}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){.border-1px::after{-moz-transform:scaleY(0.5);-ms-transform:scaleY(0.5);-webkit-transform:scaleY(0.5);transform:scaleY(0.5);}}@media (-webkit-min-device-pixel-ratio:2.5),(min-device-pixel-ratio:2.5){.border-1px::after{-moz-transform:scaleY(0.4);-ms-transform:scaleY(0.4);-webkit-transform:scaleY(0.4);transform:scaleY(0.4);}}@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){.border-1px::after{-moz-transform:scaleY(0.33);-ms-transform:scaleY(0.33);-webkit-transform:scaleY(0.33);transform:scaleY(0.33);}}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;}html{min-height:100%;}body{display:flex;flex-direction:column;min-height:100%;font-family:'微软雅黑';position:relative;}header{flex:0 0 auto;}.main_content{flex:1 1 auto;background:#edeff0;}footer{flex:0 0 auto;}.dw-color-success{color:#21B384;}.dw-color-success.has-hover:hover{color:#28A47C;}.dw-color-primary{color:#4D96DF;}.dw-color-primary.has-hover:hover{color:#4684C3;}.dw-color-warning{color:#FFBD7A;}.dw-color-warning.has-hover:hover{color:#F0AF6D;}.dw-color-danger{color:#D9534F;}.dw-color-danger.has-hover:hover{color:#C74743;}.dw-color-skyblue{color:#99CCFF;}.dw-color-skyblue.has-hover:hover{color:#8EB5DB;}.dw-color-powderblue{color:#99CCCC;}.dw-color-powderblue.has-hover:hover{color:#85BDBD;}.dw-color-lightpurple{color:#CCCCFF;}.dw-color-lightpurple.has-hover:hover{color:#B8B8E9;}.dw-color-lightgrey{color:#CCCCCC;}.dw-color-lightgrey.has-hover:hover{color:#C5C5C5;}.dw-color-deepred{color:#AA314D;}.dw-color-deepred.has-hover:hover{color:#923248;}.dw-color-disabled{color:#aaaaaa;}.dw-color-disabled.has-hover:hover{color:#aaaaaa;}.dw-bgcolor-success{background-color:#21B384;color:#fff;}.dw-bgcolor-success.has-hover:hover{background-color:#28A47C;}.dw-bgcolor-primary{background-color:#4D96DF;color:#fff;}.dw-bgcolor-primary.has-hover:hover{background-color:#4684C3;}.dw-bgcolor-warning{background-color:#FFBD7A;color:#fff;}.dw-bgcolor-warning.has-hover:hover{background-color:#F0AF6D;}.dw-bgcolor-danger{background-color:#D9534F;color:#fff;}.dw-bgcolor-danger.has-hover:hover{background-color:#C74743;}.dw-bgcolor-skyblue{background-color:#99CCFF;color:#fff;}.dw-bgcolor-skyblue.has-hover:hover{background-color:#8EB5DB;}.dw-bgcolor-powderblue{background-color:#99CCCC;color:#fff;}.dw-bgcolor-powderblue.has-hover:hover{background-color:#85BDBD;}.dw-bgcolor-lightpurple{background-color:#CCCCFF;color:#fff;}.dw-bgcolor-lightpurple.has-hover:hover{background-color:#B8B8E9;}.dw-bgcolor-lightgrey{background-color:#CCCCCC;color:#fff;}.dw-bgcolor-lightgrey.has-hover:hover{background-color:#C5C5C5;}.dw-bgcolor-deepred{background-color:#AA314D;color:#fff;}.dw-bgcolor-deepred.has-hover:hover{background-color:#923248;}.dw-bgcolor-disabled{background-color:#aaaaaa;color:#fff;}.dw-bgcolor-disabled.has-hover:hover{background-color:#aaaaaa;}::selection{background:#21B384;color:#fff;}::-moz-selectionselection{background:#21B384;color:#fff;}.dw-selectColor-success::selection{background:#21B384;color:#fff;}.dw-selectColor-danger::selection{background:#D9534F;color:#fff;}.dw-selectColor-primary::selection{background:#4D96DF;color:#fff;}.dw-selectColor-powderblue::selection{background:#99CCCC;color:#fff;}.dw-selectColor-warning::selection{background:#FFBD7A;color:#fff;}.dw-selectColor-success::-moz-selection{background:#21B384;color:#fff;}.dw-selectColor-danger::-moz-selection{background:#D9534F;color:#fff;}.dw-selectColor-primary::-moz-selection{background:#4D96DF;color:#fff;}.dw-selectColor-powderblue::-moz-selection{background:#99CCCC;color:#fff;}.dw-selectColor-warning::-moz-selection{background:#FFBD7A;color:#fff;}.console{padding:20px 40px;color:#fff;background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2Y2NjYyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjMzM5OTk5Ii8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNjY2NjOTkiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzk5Y2NmZiIvPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjY2NjY2ZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY5OWNjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');background-size:100%;background-image:-webkit-gradient(linear,0% 50%,100% 50%,color-stop(0%,#66cccc),color-stop(20%,#339999),color-stop(40%,#cccc99),color-stop(60%,#99ccff),color-stop(80%,#ccccff),color-stop(100%,#ff99cc));background-image:-moz-linear-gradient(left,#66cccc 0%,#339999 20%,#cccc99 40%,#99ccff 60%,#ccccff 80%,#ff99cc 100%);background-image:-webkit-linear-gradient(left,#66cccc 0%,#339999 20%,#cccc99 40%,#99ccff 60%,#ccccff 80%,#ff99cc 100%);background-image:linear-gradient(to right,#66cccc 0%,#339999 20%,#cccc99 40%,#99ccff 60%,#ccccff 80%,#ff99cc 100%);}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:transparent;}.flex-center-center-col{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:column;flex-direction:column;}.border-1px{position:relative;}.border-1px:after{display:block;width:100%;position:absolute;background:#21B384 !important;left:0;bottom:0;border-top:1px solid #21B384 !important;content:'';}.border-1px.dw-border-primary{position:relative;}.border-1px.dw-border-primary:after{display:block;width:100%;position:absolute;background:#4D96DF !important;left:0;bottom:0;border-top:1px solid #4D96DF !important;content:'';}.border-1px.dw-border-disabled{position:relative;}.border-1px.dw-border-disabled:after{display:block;width:100%;position:absolute;background:#aaaaaa !important;left:0;bottom:0;border-top:1px solid #aaaaaa !important;content:'';}.border-1px.dw-border-danger{position:relative;}.border-1px.dw-border-danger:after{display:block;width:100%;position:absolute;background:#D9534F !important;left:0;bottom:0;border-top:1px solid #D9534F !important;content:'';}.border-1px.dw-border-powderblue{position:relative;}.border-1px.dw-border-powderblue:after{display:block;width:100%;position:absolute;background:#99CCCC !important;left:0;bottom:0;border-top:1px solid #99CCCC !important;content:'';}.dw-fontsize-8{font-size:8px;}.dw-fontsize-10{font-size:10px;}.dw-fontsize-12{font-size:12px;}.dw-fontsize-14{font-size:14px;}.dw-fontsize-16{font-size:16px;}.dw-fontsize-18{font-size:18px;}.dw-fontsize-20{font-size:20px;}.dw-fontsize-22{font-size:22px;}.dw-fontsize-24{font-size:24px;}.dw-fontsize-26{font-size:26px;}.dw-fontsize-28{font-size:28px;}.dw-fontsize-30{font-size:30px;}.dw-fontsize-32{font-size:32px;}input{border:none;outline:none;font-size:14px;}.dw-btn{cursor:pointer;border:none;outline:none;font-size:14px;padding:10px 32px;display:inline-block;vertical-align:middle;*vertical-align:auto;*zoom:1;*display:inline;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background:#eee;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;overflow-wrap:break-word;}.dw-btn.has-hover:hover{background:#e1e1e1;}.dw-btn.has-active:active{background:#e1e1e1;}.dw-btn.btn-lg{padding:11px 36px;font-size:16px;}.dw-btn.btn{padding:10px 32px;font-size:14px;}.dw-btn.btn-sm{padding:6px 18px;font-size:12px;}.dw-btn.btn-xs{padding:2px 6px;font-size:10px;}.dw-btn.btn-success{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:#21B384;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-success.has-hover:hover{background:#28A47C;}.dw-btn.btn-success.has-active:active{background:#28A47C;}.dw-btn.btn-success.btn-empty{background:#21B384;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#21B384;background:#ffffff;border:1px solid #21B384;}.dw-btn.btn-success.btn-empty.has-hover:hover{background:#28A47C;}.dw-btn.btn-success.btn-empty.has-active:active{background:#28A47C;}.dw-btn.btn-success.btn-empty.has-hover:hover{color:#28A47C;background:#ffffff;border:1px solid #28A47C;}.dw-btn.btn-success.btn-reverse-toempty{background:#21B384;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-success.btn-reverse-toempty.has-hover:hover{background:#28A47C;}.dw-btn.btn-success.btn-reverse-toempty.has-active:active{background:#28A47C;}.dw-btn.btn-success.btn-reverse-toempty.has-hover:hover{color:#21B384;background:#ffffff;border:1px solid #21B384;}.dw-btn.btn-success.btn-reverse-tofull{background:#21B384;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#21B384;background:#ffffff;border:1px solid #21B384;}.dw-btn.btn-success.btn-reverse-tofull.has-hover:hover{background:#28A47C;}.dw-btn.btn-success.btn-reverse-tofull.has-active:active{background:#28A47C;}.dw-btn.btn-success.btn-reverse-tofull.has-hover:hover{background:#21B384;color:#ffffff;}.dw-btn.btn-success.btn-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-btn.btn-primary{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:#4D96DF;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-primary.has-hover:hover{background:#4684C3;}.dw-btn.btn-primary.has-active:active{background:#4684C3;}.dw-btn.btn-primary.btn-empty{background:#4D96DF;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#4D96DF;background:#ffffff;border:1px solid #4D96DF;}.dw-btn.btn-primary.btn-empty.has-hover:hover{background:#4684C3;}.dw-btn.btn-primary.btn-empty.has-active:active{background:#4684C3;}.dw-btn.btn-primary.btn-empty.has-hover:hover{color:#4684C3;background:#ffffff;border:1px solid #4684C3;}.dw-btn.btn-primary.btn-reverse-toempty{background:#4D96DF;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-primary.btn-reverse-toempty.has-hover:hover{background:#4684C3;}.dw-btn.btn-primary.btn-reverse-toempty.has-active:active{background:#4684C3;}.dw-btn.btn-primary.btn-reverse-toempty.has-hover:hover{color:#4D96DF;background:#ffffff;border:1px solid #4D96DF;}.dw-btn.btn-primary.btn-reverse-tofull{background:#4D96DF;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#4D96DF;background:#ffffff;border:1px solid #4D96DF;}.dw-btn.btn-primary.btn-reverse-tofull.has-hover:hover{background:#4684C3;}.dw-btn.btn-primary.btn-reverse-tofull.has-active:active{background:#4684C3;}.dw-btn.btn-primary.btn-reverse-tofull.has-hover:hover{background:#4D96DF;color:#ffffff;}.dw-btn.btn-primary.btn-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-btn.btn-warning{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:#FFBD7A;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-warning.has-hover:hover{background:#F0AF6D;}.dw-btn.btn-warning.has-active:active{background:#F0AF6D;}.dw-btn.btn-warning.btn-empty{background:#FFBD7A;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#FFBD7A;background:#ffffff;border:1px solid #FFBD7A;}.dw-btn.btn-warning.btn-empty.has-hover:hover{background:#F0AF6D;}.dw-btn.btn-warning.btn-empty.has-active:active{background:#F0AF6D;}.dw-btn.btn-warning.btn-empty.has-hover:hover{color:#F0AF6D;background:#ffffff;border:1px solid #F0AF6D;}.dw-btn.btn-warning.btn-reverse-toempty{background:#FFBD7A;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-warning.btn-reverse-toempty.has-hover:hover{background:#F0AF6D;}.dw-btn.btn-warning.btn-reverse-toempty.has-active:active{background:#F0AF6D;}.dw-btn.btn-warning.btn-reverse-toempty.has-hover:hover{color:#FFBD7A;background:#ffffff;border:1px solid #FFBD7A;}.dw-btn.btn-warning.btn-reverse-tofull{background:#FFBD7A;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#FFBD7A;background:#ffffff;border:1px solid #FFBD7A;}.dw-btn.btn-warning.btn-reverse-tofull.has-hover:hover{background:#F0AF6D;}.dw-btn.btn-warning.btn-reverse-tofull.has-active:active{background:#F0AF6D;}.dw-btn.btn-warning.btn-reverse-tofull.has-hover:hover{background:#FFBD7A;color:#ffffff;}.dw-btn.btn-warning.btn-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-btn.btn-danger{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:#D9534F;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-danger.has-hover:hover{background:#C74743;}.dw-btn.btn-danger.has-active:active{background:#C74743;}.dw-btn.btn-danger.btn-empty{background:#D9534F;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#D9534F;background:#ffffff;border:1px solid #D9534F;}.dw-btn.btn-danger.btn-empty.has-hover:hover{background:#C74743;}.dw-btn.btn-danger.btn-empty.has-active:active{background:#C74743;}.dw-btn.btn-danger.btn-empty.has-hover:hover{color:#C74743;background:#ffffff;border:1px solid #C74743;}.dw-btn.btn-danger.btn-reverse-toempty{background:#D9534F;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-danger.btn-reverse-toempty.has-hover:hover{background:#C74743;}.dw-btn.btn-danger.btn-reverse-toempty.has-active:active{background:#C74743;}.dw-btn.btn-danger.btn-reverse-toempty.has-hover:hover{color:#D9534F;background:#ffffff;border:1px solid #D9534F;}.dw-btn.btn-danger.btn-reverse-tofull{background:#D9534F;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#D9534F;background:#ffffff;border:1px solid #D9534F;}.dw-btn.btn-danger.btn-reverse-tofull.has-hover:hover{background:#C74743;}.dw-btn.btn-danger.btn-reverse-tofull.has-active:active{background:#C74743;}.dw-btn.btn-danger.btn-reverse-tofull.has-hover:hover{background:#D9534F;color:#ffffff;}.dw-btn.btn-danger.btn-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-btn.btn-default{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#333;border:1px solid #cccccc;background:#ffffff;}.dw-btn.btn-default:hover{background:#e6e6e6;}.dw-btn.btn-default.no-hover{background:#fff;}.dw-btn.btn-default.btn-empty{color:#333;background:#e6e6e6;border:1px solid #cccccc;}.dw-btn.btn-default.btn-empty:hover{border:1px solid #aaa;}.dw-btn.btn-default.btn-empty.no-hover{border:1px solid #ccc;}.dw-btn.btn-default.btn-reverse-toempty{color:#333;background:#e6e6e6;border:1px solid #aaa;}.dw-btn.btn-default.btn-reverse-toempty:hover{border:1px solid #cccccc;background:#ffffff;}.dw-btn.btn-default.btn-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-btn.btn-deepred{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:#AA314D;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-deepred.has-hover:hover{background:#923248;}.dw-btn.btn-deepred.has-active:active{background:#923248;}.dw-btn.btn-deepred.btn-empty{background:#AA314D;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#AA314D;background:#ffffff;border:1px solid #AA314D;}.dw-btn.btn-deepred.btn-empty.has-hover:hover{background:#923248;}.dw-btn.btn-deepred.btn-empty.has-active:active{background:#923248;}.dw-btn.btn-deepred.btn-empty.has-hover:hover{color:#923248;background:#ffffff;border:1px solid #923248;}.dw-btn.btn-deepred.btn-reverse-toempty{background:#AA314D;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-deepred.btn-reverse-toempty.has-hover:hover{background:#923248;}.dw-btn.btn-deepred.btn-reverse-toempty.has-active:active{background:#923248;}.dw-btn.btn-deepred.btn-reverse-toempty.has-hover:hover{color:#AA314D;background:#ffffff;border:1px solid #AA314D;}.dw-btn.btn-deepred.btn-reverse-tofull{background:#AA314D;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#AA314D;background:#ffffff;border:1px solid #AA314D;}.dw-btn.btn-deepred.btn-reverse-tofull.has-hover:hover{background:#923248;}.dw-btn.btn-deepred.btn-reverse-tofull.has-active:active{background:#923248;}.dw-btn.btn-deepred.btn-reverse-tofull.has-hover:hover{background:#AA314D;color:#ffffff;}.dw-btn.btn-deepred.btn-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-btn.btn-powderblue{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:#99CCCC;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-powderblue.has-hover:hover{background:#85BDBD;}.dw-btn.btn-powderblue.has-active:active{background:#85BDBD;}.dw-btn.btn-powderblue.btn-empty{background:#99CCCC;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#99CCCC;background:#ffffff;border:1px solid #99CCCC;}.dw-btn.btn-powderblue.btn-empty.has-hover:hover{background:#85BDBD;}.dw-btn.btn-powderblue.btn-empty.has-active:active{background:#85BDBD;}.dw-btn.btn-powderblue.btn-empty.has-hover:hover{color:#85BDBD;background:#ffffff;border:1px solid #85BDBD;}.dw-btn.btn-powderblue.btn-reverse-toempty{background:#99CCCC;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-powderblue.btn-reverse-toempty.has-hover:hover{background:#85BDBD;}.dw-btn.btn-powderblue.btn-reverse-toempty.has-active:active{background:#85BDBD;}.dw-btn.btn-powderblue.btn-reverse-toempty.has-hover:hover{color:#99CCCC;background:#ffffff;border:1px solid #99CCCC;}.dw-btn.btn-powderblue.btn-reverse-tofull{background:#99CCCC;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#99CCCC;background:#ffffff;border:1px solid #99CCCC;}.dw-btn.btn-powderblue.btn-reverse-tofull.has-hover:hover{background:#85BDBD;}.dw-btn.btn-powderblue.btn-reverse-tofull.has-active:active{background:#85BDBD;}.dw-btn.btn-powderblue.btn-reverse-tofull.has-hover:hover{background:#99CCCC;color:#ffffff;}.dw-btn.btn-powderblue.btn-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-btn.btn-skyblue{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:#99CCFF;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-skyblue.has-hover:hover{background:#8EB5DB;}.dw-btn.btn-skyblue.has-active:active{background:#8EB5DB;}.dw-btn.btn-skyblue.btn-empty{background:#99CCFF;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#99CCFF;background:#ffffff;border:1px solid #99CCFF;}.dw-btn.btn-skyblue.btn-empty.has-hover:hover{background:#8EB5DB;}.dw-btn.btn-skyblue.btn-empty.has-active:active{background:#8EB5DB;}.dw-btn.btn-skyblue.btn-empty.has-hover:hover{color:#8EB5DB;background:#ffffff;border:1px solid #8EB5DB;}.dw-btn.btn-skyblue.btn-reverse-toempty{background:#99CCFF;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-btn.btn-skyblue.btn-reverse-toempty.has-hover:hover{background:#8EB5DB;}.dw-btn.btn-skyblue.btn-reverse-toempty.has-active:active{background:#8EB5DB;}.dw-btn.btn-skyblue.btn-reverse-toempty.has-hover:hover{color:#99CCFF;background:#ffffff;border:1px solid #99CCFF;}.dw-btn.btn-skyblue.btn-reverse-tofull{background:#99CCFF;color:#ffffff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#99CCFF;background:#ffffff;border:1px solid #99CCFF;}.dw-btn.btn-skyblue.btn-reverse-tofull.has-hover:hover{background:#8EB5DB;}.dw-btn.btn-skyblue.btn-reverse-tofull.has-active:active{background:#8EB5DB;}.dw-btn.btn-skyblue.btn-reverse-tofull.has-hover:hover{background:#99CCFF;color:#ffffff;}.dw-btn.btn-skyblue.btn-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-btn:disabled{background:#aaaaaa !important;color:#fff !important;border:none !important;}.dw-btn.disabled{background:#aaaaaa !important;color:#fff !important;border:none !important;}.dw-text{cursor:pointer;outline:none;height:32px;font-size:14px;padding:2px 5px;border:1px solid #c4c4c4;display:inline-block;vertical-align:middle;*vertical-align:auto;*zoom:1;*display:inline;background:#fff;color:#333;display:inline-block;vertical-align:middle;*vertical-align:auto;*zoom:1;*display:inline;border:1px solid #ccc;}.dw-text.text-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-text.border-r{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-text.has-focus:focus{-moz-box-shadow:0 0 3px 0 #ccc;-webkit-box-shadow:0 0 3px 0 #ccc;box-shadow:0 0 3px 0 #ccc;border:1px solid #c1c1c1;}.dw-text.input-trans{-moz-transition:border,box-shadow 0.3s ease;-o-transition:border,box-shadow 0.3s ease;-webkit-transition:border,box-shadow 0.3s ease;transition:border,box-shadow 0.3s ease;}.dw-text.text-danger{background:#fff;color:#333;display:inline-block;vertical-align:middle;*vertical-align:auto;*zoom:1;*display:inline;border:1px solid #D9534F;}.dw-text.text-danger.text-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-text.text-danger.border-r{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}.dw-text.text-danger.has-focus:focus{-moz-box-shadow:0 0 3px 0 #F89898;-webkit-box-shadow:0 0 3px 0 #F89898;box-shadow:0 0 3px 0 #F89898;border:1px solid #F89898;}.dw-text.text-warning{background:#fff;color:#333;display:inline-block;vertical-align:middle;*vertical-align:auto;*zoom:1;*display:inline;border:1px solid #FFBD7A;}.dw-text.text-warning.text-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-text.text-warning.border-r{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}.dw-text.text-warning.has-focus:focus{-moz-box-shadow:0 0 3px 0 #F3D497;-webkit-box-shadow:0 0 3px 0 #F3D497;box-shadow:0 0 3px 0 #F3D497;border:1px solid #F3D497;}.dw-text.text-success{background:#fff;color:#333;display:inline-block;vertical-align:middle;*vertical-align:auto;*zoom:1;*display:inline;border:1px solid #21B384;}.dw-text.text-success.text-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-text.text-success.border-r{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}.dw-text.text-success.has-focus:focus{-moz-box-shadow:0 0 3px 0 #97E5AD;-webkit-box-shadow:0 0 3px 0 #97E5AD;box-shadow:0 0 3px 0 #97E5AD;border:1px solid #97E5AD;}.dw-text.text-primary{background:#fff;color:#333;display:inline-block;vertical-align:middle;*vertical-align:auto;*zoom:1;*display:inline;border:1px solid #4D96DF;}.dw-text.text-primary.text-trans{-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}.dw-text.text-primary.border-r{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.dw-text.text-primary.has-focus:focus{-moz-box-shadow:0 0 3px 0 #ACE0F5;-webkit-box-shadow:0 0 3px 0 #ACE0F5;box-shadow:0 0 3px 0 #ACE0F5;border:1px solid #ACE0F5;}.dw-boot-container:before,.dw-boot-container:after,.dw-boot-container-fluid:before,.dw-boot-container-fluid:after,.dw-boot-row:before,.dw-boot-row:after{display:table;content:" ";}.dw-boot-container:after,.dw-boot-container-fluid:after,.dw-boot-row:after{clear:both;}.dw-boot-container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px){.dw-boot-container{width:750px;}}@media (min-width:992px){.dw-boot-container{width:970px;}}@media (min-width:1200px){.dw-boot-container{width:1170px;}}.dw-boot-container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}.dw-boot-row{margin-right:-15px;margin-left:-15px;}.dw-boot-col-xs-1,.dw-boot-col-sm-1,.dw-boot-col-md-1,.dw-boot-col-lg-1,.dw-boot-col-xs-2,.dw-boot-col-sm-2,.dw-boot-col-md-2,.dw-boot-col-lg-2,.dw-boot-col-xs-3,.dw-boot-col-sm-3,.dw-boot-col-md-3,.dw-boot-col-lg-3,.dw-boot-col-xs-4,.dw-boot-col-sm-4,.dw-boot-col-md-4,.dw-boot-col-lg-4,.dw-boot-col-xs-5,.dw-boot-col-sm-5,.dw-boot-col-md-5,.dw-boot-col-lg-5,.dw-boot-col-xs-6,.dw-boot-col-sm-6,.dw-boot-col-md-6,.dw-boot-col-lg-6,.dw-boot-col-xs-7,.dw-boot-col-sm-7,.dw-boot-col-md-7,.dw-boot-col-lg-7,.dw-boot-col-xs-8,.dw-boot-col-sm-8,.dw-boot-col-md-8,.dw-boot-col-lg-8,.dw-boot-col-xs-9,.dw-boot-col-sm-9,.dw-boot-col-md-9,.dw-boot-col-lg-9,.dw-boot-col-xs-10,.dw-boot-col-sm-10,.dw-boot-col-md-10,.dw-boot-col-lg-10,.dw-boot-col-xs-11,.dw-boot-col-sm-11,.dw-boot-col-md-11,.dw-boot-col-lg-11,.dw-boot-col-xs-12,.dw-boot-col-sm-12,.dw-boot-col-md-12,.dw-boot-col-lg-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px;}.dw-boot-col-xs-1,.dw-boot-col-xs-2,.dw-boot-col-xs-3,.dw-boot-col-xs-4,.dw-boot-col-xs-5,.dw-boot-col-xs-6,.dw-boot-col-xs-7,.dw-boot-col-xs-8,.dw-boot-col-xs-9,.dw-boot-col-xs-10,.dw-boot-col-xs-11,.dw-boot-col-xs-12{float:left;}.dw-boot-col-xs-12{width:100%;}.dw-boot-col-xs-11{width:91.66666667%;}.dw-boot-col-xs-10{width:83.33333333%;}.dw-boot-col-xs-9{width:75%;}.dw-boot-col-xs-8{width:66.66666667%;}.dw-boot-col-xs-7{width:58.33333333%;}.dw-boot-col-xs-6{width:50%;}.dw-boot-col-xs-5{width:41.66666667%;}.dw-boot-col-xs-4{width:33.33333333%;}.dw-boot-col-xs-3{width:25%;}.dw-boot-col-xs-2{width:16.66666667%;}.dw-boot-col-xs-1{width:8.33333333%;}.dw-boot-col-xs-pull-12{right:100%;}.dw-boot-col-xs-pull-11{right:91.66666667%;}.dw-boot-col-xs-pull-10{right:83.33333333%;}.dw-boot-col-xs-pull-9{right:75%;}.dw-boot-col-xs-pull-8{right:66.66666667%;}.dw-boot-col-xs-pull-7{right:58.33333333%;}.dw-boot-col-xs-pull-6{right:50%;}.dw-boot-col-xs-pull-5{right:41.66666667%;}.dw-boot-col-xs-pull-4{right:33.33333333%;}.dw-boot-col-xs-pull-3{right:25%;}.dw-boot-col-xs-pull-2{right:16.66666667%;}.dw-boot-col-xs-pull-1{right:8.33333333%;}.dw-boot-col-xs-pull-0{right:auto;}.dw-boot-col-xs-push-12{left:100%;}.dw-boot-col-xs-push-11{left:91.66666667%;}.dw-boot-col-xs-push-10{left:83.33333333%;}.dw-boot-col-xs-push-9{left:75%;}.dw-boot-col-xs-push-8{left:66.66666667%;}.dw-boot-col-xs-push-7{left:58.33333333%;}.dw-boot-col-xs-push-6{left:50%;}.dw-boot-col-xs-push-5{left:41.66666667%;}.dw-boot-col-xs-push-4{left:33.33333333%;}.dw-boot-col-xs-push-3{left:25%;}.dw-boot-col-xs-push-2{left:16.66666667%;}.dw-boot-col-xs-push-1{left:8.33333333%;}.dw-boot-col-xs-push-0{left:auto;}.dw-boot-col-xs-offset-12{margin-left:100%;}.dw-boot-col-xs-offset-11{margin-left:91.66666667%;}.dw-boot-col-xs-offset-10{margin-left:83.33333333%;}.dw-boot-col-xs-offset-9{margin-left:75%;}.dw-boot-col-xs-offset-8{margin-left:66.66666667%;}.dw-boot-col-xs-offset-7{margin-left:58.33333333%;}.dw-boot-col-xs-offset-6{margin-left:50%;}.dw-boot-col-xs-offset-5{margin-left:41.66666667%;}.dw-boot-col-xs-offset-4{margin-left:33.33333333%;}.dw-boot-col-xs-offset-3{margin-left:25%;}.dw-boot-col-xs-offset-2{margin-left:16.66666667%;}.dw-boot-col-xs-offset-1{margin-left:8.33333333%;}.dw-boot-col-xs-offset-0{margin-left:0;}@media (min-width:768px){.dw-boot-col-sm-1,.dw-boot-col-sm-2,.dw-boot-col-sm-3,.dw-boot-col-sm-4,.dw-boot-col-sm-5,.dw-boot-col-sm-6,.dw-boot-col-sm-7,.dw-boot-col-sm-8,.dw-boot-col-sm-9,.dw-boot-col-sm-10,.dw-boot-col-sm-11,.dw-boot-col-sm-12{float:left;}.dw-boot-col-sm-12{width:100%;}.dw-boot-col-sm-11{width:91.66666667%;}.dw-boot-col-sm-10{width:83.33333333%;}.dw-boot-col-sm-9{width:75%;}.dw-boot-col-sm-8{width:66.66666667%;}.dw-boot-col-sm-7{width:58.33333333%;}.dw-boot-col-sm-6{width:50%;}.dw-boot-col-sm-5{width:41.66666667%;}.dw-boot-col-sm-4{width:33.33333333%;}.dw-boot-col-sm-3{width:25%;}.dw-boot-col-sm-2{width:16.66666667%;}.dw-boot-col-sm-1{width:8.33333333%;}.dw-boot-col-sm-pull-12{right:100%;}.dw-boot-col-sm-pull-11{right:91.66666667%;}.dw-boot-col-sm-pull-10{right:83.33333333%;}.dw-boot-col-sm-pull-9{right:75%;}.dw-boot-col-sm-pull-8{right:66.66666667%;}.dw-boot-col-sm-pull-7{right:58.33333333%;}.dw-boot-col-sm-pull-6{right:50%;}.dw-boot-col-sm-pull-5{right:41.66666667%;}.dw-boot-col-sm-pull-4{right:33.33333333%;}.dw-boot-col-sm-pull-3{right:25%;}.dw-boot-col-sm-pull-2{right:16.66666667%;}.dw-boot-col-sm-pull-1{right:8.33333333%;}.dw-boot-col-sm-pull-0{right:auto;}.dw-boot-col-sm-push-12{left:100%;}.dw-boot-col-sm-push-11{left:91.66666667%;}.dw-boot-col-sm-push-10{left:83.33333333%;}.dw-boot-col-sm-push-9{left:75%;}.dw-boot-col-sm-push-8{left:66.66666667%;}.dw-boot-col-sm-push-7{left:58.33333333%;}.dw-boot-col-sm-push-6{left:50%;}.dw-boot-col-sm-push-5{left:41.66666667%;}.dw-boot-col-sm-push-4{left:33.33333333%;}.dw-boot-col-sm-push-3{left:25%;}.dw-boot-col-sm-push-2{left:16.66666667%;}.dw-boot-col-sm-push-1{left:8.33333333%;}.dw-boot-col-sm-push-0{left:auto;}.dw-boot-col-sm-offset-12{margin-left:100%;}.dw-boot-col-sm-offset-11{margin-left:91.66666667%;}.dw-boot-col-sm-offset-10{margin-left:83.33333333%;}.dw-boot-col-sm-offset-9{margin-left:75%;}.dw-boot-col-sm-offset-8{margin-left:66.66666667%;}.dw-boot-col-sm-offset-7{margin-left:58.33333333%;}.dw-boot-col-sm-offset-6{margin-left:50%;}.dw-boot-col-sm-offset-5{margin-left:41.66666667%;}.dw-boot-col-sm-offset-4{margin-left:33.33333333%;}.dw-boot-col-sm-offset-3{margin-left:25%;}.dw-boot-col-sm-offset-2{margin-left:16.66666667%;}.dw-boot-col-sm-offset-1{margin-left:8.33333333%;}.dw-boot-col-sm-offset-0{margin-left:0;}}@media (min-width:992px){.dw-boot-col-md-1,.dw-boot-col-md-2,.dw-boot-col-md-3,.dw-boot-col-md-4,.dw-boot-col-md-5,.dw-boot-col-md-6,.dw-boot-col-md-7,.dw-boot-col-md-8,.dw-boot-col-md-9,.dw-boot-col-md-10,.dw-boot-col-md-11,.dw-boot-col-md-12{float:left;}.dw-boot-col-md-12{width:100%;}.dw-boot-col-md-11{width:91.66666667%;}.dw-boot-col-md-10{width:83.33333333%;}.dw-boot-col-md-9{width:75%;}.dw-boot-col-md-8{width:66.66666667%;}.dw-boot-col-md-7{width:58.33333333%;}.dw-boot-col-md-6{width:50%;}.dw-boot-col-md-5{width:41.66666667%;}.dw-boot-col-md-4{width:33.33333333%;}.dw-boot-col-md-3{width:25%;}.dw-boot-col-md-2{width:16.66666667%;}.dw-boot-col-md-1{width:8.33333333%;}.dw-boot-col-md-pull-12{right:100%;}.dw-boot-col-md-pull-11{right:91.66666667%;}.dw-boot-col-md-pull-10{right:83.33333333%;}.dw-boot-col-md-pull-9{right:75%;}.dw-boot-col-md-pull-8{right:66.66666667%;}.dw-boot-col-md-pull-7{right:58.33333333%;}.dw-boot-col-md-pull-6{right:50%;}.dw-boot-col-md-pull-5{right:41.66666667%;}.dw-boot-col-md-pull-4{right:33.33333333%;}.dw-boot-col-md-pull-3{right:25%;}.dw-boot-col-md-pull-2{right:16.66666667%;}.dw-boot-col-md-pull-1{right:8.33333333%;}.dw-boot-col-md-pull-0{right:auto;}.dw-boot-col-md-push-12{left:100%;}.dw-boot-col-md-push-11{left:91.66666667%;}.dw-boot-col-md-push-10{left:83.33333333%;}.dw-boot-col-md-push-9{left:75%;}.dw-boot-col-md-push-8{left:66.66666667%;}.dw-boot-col-md-push-7{left:58.33333333%;}.dw-boot-col-md-push-6{left:50%;}.dw-boot-col-md-push-5{left:41.66666667%;}.dw-boot-col-md-push-4{left:33.33333333%;}.dw-boot-col-md-push-3{left:25%;}.dw-boot-col-md-push-2{left:16.66666667%;}.dw-boot-col-md-push-1{left:8.33333333%;}.dw-boot-col-md-push-0{left:auto;}.dw-boot-col-md-offset-12{margin-left:100%;}.dw-boot-col-md-offset-11{margin-left:91.66666667%;}.dw-boot-col-md-offset-10{margin-left:83.33333333%;}.dw-boot-col-md-offset-9{margin-left:75%;}.dw-boot-col-md-offset-8{margin-left:66.66666667%;}.dw-boot-col-md-offset-7{margin-left:58.33333333%;}.dw-boot-col-md-offset-6{margin-left:50%;}.dw-boot-col-md-offset-5{margin-left:41.66666667%;}.dw-boot-col-md-offset-4{margin-left:33.33333333%;}.dw-boot-col-md-offset-3{margin-left:25%;}.dw-boot-col-md-offset-2{margin-left:16.66666667%;}.dw-boot-col-md-offset-1{margin-left:8.33333333%;}.dw-boot-col-md-offset-0{margin-left:0;}}@media (min-width:1200px){.dw-boot-col-lg-1,.dw-boot-col-lg-2,.dw-boot-col-lg-3,.dw-boot-col-lg-4,.dw-boot-col-lg-5,.dw-boot-col-lg-6,.dw-boot-col-lg-7,.dw-boot-col-lg-8,.dw-boot-col-lg-9,.dw-boot-col-lg-10,.dw-boot-col-lg-11,.dw-boot-col-lg-12{float:left;}.dw-boot-col-lg-12{width:100%;}.dw-boot-col-lg-11{width:91.66666667%;}.dw-boot-col-lg-10{width:83.33333333%;}.dw-boot-col-lg-9{width:75%;}.dw-boot-col-lg-8{width:66.66666667%;}.dw-boot-col-lg-7{width:58.33333333%;}.dw-boot-col-lg-6{width:50%;}.dw-boot-col-lg-5{width:41.66666667%;}.dw-boot-col-lg-4{width:33.33333333%;}.dw-boot-col-lg-3{width:25%;}.dw-boot-col-lg-2{width:16.66666667%;}.dw-boot-col-lg-1{width:8.33333333%;}.dw-boot-col-lg-pull-12{right:100%;}.dw-boot-col-lg-pull-11{right:91.66666667%;}.dw-boot-col-lg-pull-10{right:83.33333333%;}.dw-boot-col-lg-pull-9{right:75%;}.dw-boot-col-lg-pull-8{right:66.66666667%;}.dw-boot-col-lg-pull-7{right:58.33333333%;}.dw-boot-col-lg-pull-6{right:50%;}.dw-boot-col-lg-pull-5{right:41.66666667%;}.dw-boot-col-lg-pull-4{right:33.33333333%;}.dw-boot-col-lg-pull-3{right:25%;}.dw-boot-col-lg-pull-2{right:16.66666667%;}.dw-boot-col-lg-pull-1{right:8.33333333%;}.dw-boot-col-lg-pull-0{right:auto;}.dw-boot-col-lg-push-12{left:100%;}.dw-boot-col-lg-push-11{left:91.66666667%;}.dw-boot-col-lg-push-10{left:83.33333333%;}.dw-boot-col-lg-push-9{left:75%;}.dw-boot-col-lg-push-8{left:66.66666667%;}.dw-boot-col-lg-push-7{left:58.33333333%;}.dw-boot-col-lg-push-6{left:50%;}.dw-boot-col-lg-push-5{left:41.66666667%;}.dw-boot-col-lg-push-4{left:33.33333333%;}.dw-boot-col-lg-push-3{left:25%;}.dw-boot-col-lg-push-2{left:16.66666667%;}.dw-boot-col-lg-push-1{left:8.33333333%;}.dw-boot-col-lg-push-0{left:auto;}.dw-boot-col-lg-offset-12{margin-left:100%;}.dw-boot-col-lg-offset-11{margin-left:91.66666667%;}.dw-boot-col-lg-offset-10{margin-left:83.33333333%;}.dw-boot-col-lg-offset-9{margin-left:75%;}.dw-boot-col-lg-offset-8{margin-left:66.66666667%;}.dw-boot-col-lg-offset-7{margin-left:58.33333333%;}.dw-boot-col-lg-offset-6{margin-left:50%;}.dw-boot-col-lg-offset-5{margin-left:41.66666667%;}.dw-boot-col-lg-offset-4{margin-left:33.33333333%;}.dw-boot-col-lg-offset-3{margin-left:25%;}.dw-boot-col-lg-offset-2{margin-left:16.66666667%;}.dw-boot-col-lg-offset-1{margin-left:8.33333333%;}.dw-boot-col-lg-offset-0{margin-left:0;}}.bg-color-success{background:#21B384;text-align:center;}.bg-color-success:before{content:"success";}.bg-color-success:hover{background:#28A47C;}.bg-color-success:hover:before{content:"hover";}.bg-color-primary{background:#4D96DF;text-align:center;}.bg-color-primary:before{content:"primary";}.bg-color-primary:hover{background:#4684C3;}.bg-color-primary:hover:before{content:"hover";}.bg-color-danger{background:#D9534F;text-align:center;}.bg-color-danger:before{content:"danger";}.bg-color-danger:hover{background:#C74743;}.bg-color-danger:hover:before{content:"hover";}.bg-color-warning{background:#FFBD7A;text-align:center;}.bg-color-warning:before{content:'warning';}.bg-color-warning:hover{background:#F0AF6D;}.bg-color-warning:hover:before{content:'hover';}.bg-color-skyblue{background:#99CCFF;text-align:center;}.bg-color-skyblue:before{content:"skyblue";}.bg-color-skyblue:hover{background:#8EB5DB;}.bg-color-skyblue:hover:before{content:"hover";}.bg-color-powderblue{background:#99CCCC;text-align:center;}.bg-color-powderblue:before{content:"powderblue";}.bg-color-powderblue:hover{background:#85BDBD;}.bg-color-powderblue:hover:before{content:"hover";}.bg-color-springgreen{background:#66CC99;text-align:center;}.bg-color-springgreen:before{content:"springgreen";}.bg-color-springgreen:hover{background:#5AB588;}.bg-color-springgreen:hover:before{content:"hover";}.bg-color-lightpurple{background:#CCCCFF;text-align:center;}.bg-color-lightpurple:before{content:'lightpurple';}.bg-color-lightpurple:hover{background:#B8B8E9;}.bg-color-lightpurple:hover:before{content:'hover';}.bg-color-deepred{background:#AA314D;text-align:center;}.bg-color-deepred:before{content:'deepred';}.bg-color-deepred:hover{background:#923248;}.bg-color-deepred:hover:before{content:'hover';}.bg-color-lightgrey{background:#CCCCCC;text-align:center;}.bg-color-lightgrey:before{content:'lightgrey';}.bg-color-lightgrey:hover{background:#C5C5C5;}.bg-color-lightgrey:hover:before{content:'hover';}.bg-color-default{background:#ffffff;text-align:center;}.bg-color-default:before{content:'default';color:#aaa;}.bg-color-default:hover{background:#e6e6e6;}.bg-color-default:hover:before{content:'hover';color:#fff;}

3.2 loading.css

/* Welcome to Compass.* In this file you should write your main styles. (or centralize your imports)* Import this file using the following HTML or equivalent:* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 5, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss *//* line 14, ../sass/loading.scss */
.cpt-loading-mask * {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
}/* line 18, ../sass/loading.scss */
.cpt-loading-mask.column {width: 100%;height: 100%;position: fixed;top: 0;left: 0;bottom: 0;right: 0;background: transparent;z-index: 100;-moz-transform: translateZ(0);-webkit-transform: translateZ(0);transform: translateZ(0);-moz-user-select: -moz-none;-ms-user-select: none;-webkit-user-select: none;user-select: none;
}
/* line 31, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading {position: absolute;top: 50%;left: 50%;width: 260px;background: rgba(0, 0, 0, 0.6);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-moz-transform: translate3d(-50%, -50%, 0);-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;padding: 16px;
}
/* line 42, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading {position: relative;width: 60px;height: 60px;background: transparent;margin: 0 auto;
}
/* line 50, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading.origin div {width: 80%;height: 80%;position: absolute;left: 10%;top: 10%;filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;-moz-animation: load 2.28s linear infinite;-webkit-animation: load 2.28s linear infinite;animation: load 2.28s linear infinite;
}
/* line 59, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading.origin div span {display: inline-block;width: 8px;height: 8px;border-radius: 50%;background: #FBC9B9;position: absolute;left: 50%;margin-top: -10px;margin-left: -10px;
}
/* line 72, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(1) {-moz-animation-delay: 0.2s;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;
}
/* line 75, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(2) {-moz-animation-delay: 0.4s;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;
}
/* line 78, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(3) {-moz-animation-delay: 0.6s;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;
}
/* line 81, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(4) {-moz-animation-delay: 0.8s;-webkit-animation-delay: 0.8s;animation-delay: 0.8s;
}
/* line 84, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(5) {-moz-animation-delay: 1s;-webkit-animation-delay: 1s;animation-delay: 1s;
}
/* line 90, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading.pic {width: 80px;height: 80px;
}
/* line 94, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading.pic img {width: 100%;height: 100%;
}
/* line 101, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading-title {width: 100%;text-align: center;color: #fff;padding: 2px 0;font-size: 16px;margin-bottom: 20px;white-space: nowrap;overflow: hidden;-ms-text-overflow: ellipsis;-o-text-overflow: ellipsis;text-overflow: ellipsis;
}
/* line 112, ../sass/loading.scss */
.cpt-loading-mask.column .div-loading .loading-discription {width: 100%;text-align: center;color: #fff;font-size: 12px;margin-top: 20px;
}
/* line 123, ../sass/loading.scss */
.cpt-loading-mask.row {width: 100%;height: 100%;position: fixed;top: 0;left: 0;bottom: 0;right: 0;background: transparent;z-index: 100;-moz-transform: translateZ(0);-webkit-transform: translateZ(0);transform: translateZ(0);-moz-user-select: -moz-none;-ms-user-select: none;-webkit-user-select: none;user-select: none;
}
/* line 136, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading {position: absolute;top: 50%;left: 50%;width: 260px;background: rgba(0, 0, 0, 0.6);display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;-webkit-flex-direction: row-reverse;flex-direction: row-reverse;-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-moz-transform: translate3d(-50%, -50%, 0);-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);-moz-border-radius: 12px;-webkit-border-radius: 12px;border-radius: 12px;padding: 15px;
}
/* line 151, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading {position: relative;width: 60px;height: 60px;background: transparent;float: left;
}
/* line 160, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading.origin div {width: 80%;height: 80%;position: absolute;left: 10%;top: 10%;filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;-moz-animation: load 2.28s linear infinite;-webkit-animation: load 2.28s linear infinite;animation: load 2.28s linear infinite;
}
/* line 169, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading.origin div span {display: inline-block;width: 8px;height: 8px;border-radius: 50%;background: #FBC9B9;position: absolute;left: 50%;margin-top: -10px;margin-left: -10px;
}
/* line 182, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading.origin div:nth-child(1) {-moz-animation-delay: 0.2s;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;
}
/* line 185, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading.origin div:nth-child(2) {-moz-animation-delay: 0.4s;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;
}
/* line 188, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading.origin div:nth-child(3) {-moz-animation-delay: 0.6s;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;
}
/* line 191, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading.origin div:nth-child(4) {-moz-animation-delay: 0.8s;-webkit-animation-delay: 0.8s;animation-delay: 0.8s;
}
/* line 194, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading.origin div:nth-child(5) {-moz-animation-delay: 1s;-webkit-animation-delay: 1s;animation-delay: 1s;
}
/* line 200, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading.pic {width: 80px;height: 80px;
}
/* line 204, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading.pic img {width: 100%;height: 100%;
}
/* line 211, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading-title {width: 72%;text-align: center;color: #fff;font-size: 16px;padding: 2px 0;padding-left: 20px;margin-bottom: 0;white-space: nowrap;overflow: hidden;-ms-text-overflow: ellipsis;-o-text-overflow: ellipsis;text-overflow: ellipsis;
}
/* line 223, ../sass/loading.scss */
.cpt-loading-mask.row .div-loading .loading-discription {display: none;width: 100%;text-align: center;color: #fff;font-size: 12px;margin-top: 20px;
}/* line 236, ../sass/loading.scss */
.animated {animation-duration: 0.5s;animation-fill-mode: both;
}/* line 241, ../sass/loading.scss */
.animated.infinite {animation-iteration-count: infinite;
}@-webkit-keyframes fadeInNoTransform {0% {opacity: 0;}100% {opacity: 1;}
}
@keyframes fadeInNoTransform {0% {opacity: 0;}100% {opacity: 1;}
}
/* line 256, ../sass/loading.scss */
.fadeInNoTransform {-webkit-animation-name: fadeInNoTransform;animation-name: fadeInNoTransform;
}@-webkit-keyframes fadeOutNoTransform {0% {opacity: 1;}100% {opacity: 0;}
}
@keyframes fadeOutNoTransform {0% {opacity: 1;}100% {opacity: 0;}
}
/* line 269, ../sass/loading.scss */
.fadeOutNoTransform {-webkit-animation-name: fadeOutNoTransform;animation-name: fadeOutNoTransform;
}@-webkit-keyframes load {0% {-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}10% {-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}50% {filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;-moz-transform: rotate(160deg);-ms-transform: rotate(160deg);-webkit-transform: rotate(160deg);transform: rotate(160deg);}62% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;}65% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-transform: rotate(200deg);-ms-transform: rotate(200deg);-webkit-transform: rotate(200deg);transform: rotate(200deg);}90% {-moz-transform: rotate(340deg);-ms-transform: rotate(340deg);-webkit-transform: rotate(340deg);transform: rotate(340deg);}100% {-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-moz-keyframes load {0% {-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}10% {-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}50% {filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;-moz-transform: rotate(160deg);-ms-transform: rotate(160deg);-webkit-transform: rotate(160deg);transform: rotate(160deg);}62% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;}65% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-transform: rotate(200deg);-ms-transform: rotate(200deg);-webkit-transform: rotate(200deg);transform: rotate(200deg);}90% {-moz-transform: rotate(340deg);-ms-transform: rotate(340deg);-webkit-transform: rotate(340deg);transform: rotate(340deg);}100% {-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-ms-keyframes load {0% {-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}10% {-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}50% {filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;-moz-transform: rotate(160deg);-ms-transform: rotate(160deg);-webkit-transform: rotate(160deg);transform: rotate(160deg);}62% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;}65% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-transform: rotate(200deg);-ms-transform: rotate(200deg);-webkit-transform: rotate(200deg);transform: rotate(200deg);}90% {-moz-transform: rotate(340deg);-ms-transform: rotate(340deg);-webkit-transform: rotate(340deg);transform: rotate(340deg);}100% {-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-o-keyframes load {0% {-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}10% {-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}50% {filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;-moz-transform: rotate(160deg);-ms-transform: rotate(160deg);-webkit-transform: rotate(160deg);transform: rotate(160deg);}62% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;}65% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-transform: rotate(200deg);-ms-transform: rotate(200deg);-webkit-transform: rotate(200deg);transform: rotate(200deg);}90% {-moz-transform: rotate(340deg);-ms-transform: rotate(340deg);-webkit-transform: rotate(340deg);transform: rotate(340deg);}100% {-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes load {0% {-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}10% {-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}50% {filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;-moz-transform: rotate(160deg);-ms-transform: rotate(160deg);-webkit-transform: rotate(160deg);transform: rotate(160deg);}62% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;}65% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-transform: rotate(200deg);-ms-transform: rotate(200deg);-webkit-transform: rotate(200deg);transform: rotate(200deg);}90% {-moz-transform: rotate(340deg);-ms-transform: rotate(340deg);-webkit-transform: rotate(340deg);transform: rotate(340deg);}100% {-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

4. js文件

4.1 jquery文件我就不贴了，贴出loading.js

//未曾遗忘的青春
//github  https://github.com/IFmiss/loading
//显示Loading
(function($){$.fn.loading = function(options){var $this = $(this);var _this = this;return this.each(function(){var loadingPosition ='';var defaultProp = {direction:                'column',                                               //方向，column纵向   row 横向animateIn:                 'fadeInNoTransform',                                    //进入类型title:                  '请稍等...',                                             //显示什么内容name:                   'loadingName',                                          //loading的data-name的属性值  用于删除loading需要的参数type:                  'origin',                                               //pic   origin  discription:            '这是一个描述',                                       //loading的描述titleColor:             'rgba(255,255,255,0.7)',                                //title文本颜色discColor:               'rgba(255,255,255,0.7)',                                //disc文本颜色loadingWidth:           260,                                                  //中间的背景宽度widthloadingBg:                'rgba(0, 0, 0, 0.6)',                                   //中间的背景色borderRadius:           12,                                                     //中间的背景色的borderRadiusloadingMaskBg:         'transparent',                                          //背景遮罩层颜色zIndex:                1000001,                                                //层级// 这是圆形旋转的loading样式  originDivWidth:            60,                                                     //loadingDiv的widthoriginDivHeight:          60,                                                     //loadingDiv的HeightoriginWidth:             8,                                                      //小圆点widthoriginHeight:             8,                                                      //小圆点HeightoriginBg:                '#fefefe',                                              //小圆点背景色smallLoading:           false,                                                  //显示小的loading// 这是图片的样式   (pic)imgSrc:              'http://www.daiwei.org/index/images/logo/dw.png',       //默认的图片地址imgDivWidth:           80,                                                     //imgDiv的widthimgDivHeight:             80,                                                     //imgDiv的HeightflexCenter:          false,                                                  //是否用flex布局让loading-div垂直水平居中flexDirection:             'row',                                                  //row column  flex的方向   横向 和 纵向             mustRelative:           false,                                                  //$this是否规定relative};var opt = $.extend(defaultProp,options || {});//根据用户是针对body还是元素  设置对应的定位方式if($this.selector == 'body'){$('body,html').css({overflow:'hidden',});loadingPosition = 'fixed';}else if(opt.mustRelative){$this.css({position:'relative',});loadingPosition = 'absolute';}else{loadingPosition = 'absolute';}defaultProp._showOriginLoading = function(){var smallLoadingMargin = opt.smallLoading ? 0 : '-10px';if(opt.direction == 'row'){smallLoadingMargin='-6px'}//悬浮层_this.cpt_loading_mask = $('<div class="cpt-loading-mask animated '+opt.animateIn+' '+opt.direction+'" data-name="'+opt.name+'"></div>').css({'background':opt.loadingMaskBg,'z-index':opt.zIndex,'position':loadingPosition,}).appendTo($this);//中间的显示层_this.div_loading = $('<div class="div-loading"></div>').css({'background':opt.loadingBg,'width':opt.loadingWidth,'height':opt.loadingHeight,'-webkit-border-radius':opt.borderRadius,'-moz-border-radius':opt.borderRadius,'border-radius':opt.borderRadius,}).appendTo(_this.cpt_loading_mask);if(opt.flexCenter){_this.div_loading.css({"display": "-webkit-flex","display": "flex","-webkit-flex-direction":opt.flexDirection,"flex-direction":opt.flexDirection,"-webkit-align-items": "center","align-items": "center","-webkit-justify-content": "center","justify-content":"center",});}//loading标题_this.loading_title = $('<p class="loading-title txt-textOneRow"></p>').css({color:opt.titleColor,}).html(opt.title).appendTo(_this.div_loading);//loading中间的内容  可以是图片或者转动的小圆球_this.loading = $('<div class="loading '+opt.type+'"></div>').css({'width':opt.originDivWidth,'height':opt.originDivHeight,}).appendTo(_this.div_loading);//描述_this.loading_discription = $('<p class="loading-discription txt-textOneRow"></p>').css({color:opt.discColor,}).html(opt.discription).appendTo(_this.div_loading);if(opt.type == 'origin'){_this.loadingOrigin = $('<div class="div-loadingOrigin"><span></span></div><div class="div-loadingOrigin"><span></span></div><div class="div_loadingOrigin"><span></span></div><div class="div_loadingOrigin"><span></span></div><div class="div_loadingOrigin"><span></span></div>').appendTo(_this.loading);_this.loadingOrigin.children().css({"margin-top":smallLoadingMargin,"margin-left":smallLoadingMargin,"width":opt.originWidth,"height":opt.originHeight,"background":opt.originBg,});}    if(opt.type == 'pic'){_this.loadingPic = $('<img src="'+opt.imgSrc+'" alt="loading" />').appendTo(_this.loading);}          //关闭事件冒泡  和默认的事件_this.cpt_loading_mask.on('touchstart touchend touchmove click',function(e){e.stopPropagation();e.preventDefault();});};defaultProp._createLoading = function(){//不能生成两个loading data-name 一样的loadingif($(".cpt-loading-mask[data-name="+opt.name+"]").length > 0){// console.error('loading mask cant has same date-name('+opt.name+'), you cant set "date-name" prop when you create it');return}defaultProp._showOriginLoading();};defaultProp._createLoading();});}})(jQuery)//关闭Loading
function removeLoading(loadingName){var loadingName = loadingName || '';$('body,html').css({overflow:'auto',});if(loadingName == ''){$(".cpt-loading-mask").remove();}else{var name = loadingName || 'loadingName';$(".cpt-loading-mask[data-name="+name+"]").remove();     }
}

5.index.html 直接用浏览器打卡 index.html 就可以看到效果，主要是两个方法 loading1() 弹出加载框，并屏蔽页面;

removeLoading('test'); 取消加载框。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading测试效果</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/loading.css"></head>
<style>
body,html{height: 100%;display: flex;justify-content: center;align-items: center;
}.div-btn{width: 100%;max-width: 560px;/*margin:200px auto; */
}.div-btn div{margin: 10px 0 ;
}.test-div{width: 300px;height: 300px;margin:20px auto;border: 1px solid #aaa;position: relative;
}
</style><body><div class="div-btn"><div class="dw-btn btn-success" onClick="loading1()">默认效果</div><div class="dw-btn btn-warning" onClick="loading8()">纵向文字颜色</div><div class="dw-btn btn-primary" onClick="loading2()">纵向效果无title</div><div class="dw-btn btn-danger" onClick="loading3()">纵向效果无title描述</div><div class="dw-btn btn-warning " onClick="loading4()">其他背景色</div><div class="dw-btn btn-success" onClick="loading5()">纵向图片效果</div><div class="dw-btn btn-primary" onClick="loading6()">横向图片效果</div><div class="dw-btn btn-danger" onClick="loading7()">横向进度效果,字体颜色</div><div class="dw-btn btn-warning" onClick="loading10()">无过渡效果</div>
</div><script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/loading.js"></script>
<script type="text/javascript">
function loading1() {$('body').loading({loadingWidth:240,title:'请稍等!',name:'test',discription:'',direction:'column',type:'origin',// originBg:'#71EA71',originDivWidth:40,originDivHeight:40,originWidth:6,originHeight:6,smallLoading:false,loadingMaskBg:'rgba(0,0,0,0.2)'});setTimeout(function(){removeLoading('test');},3000);
}function loading2() {$('body').loading({loadingWidth:240,title:'',name:'test',discription:'描述描述描述描述',direction:'column',type:'origin',// originBg:'#71EA71',originDivWidth:40,originDivHeight:40,originWidth:6,originHeight:6,smallLoading:false,loadingMaskBg:'rgba(0,0,0,0.2)'});setTimeout(function(){removeLoading('test');},3000);
}function loading3() {$('body').loading({loadingWidth:120,title:'',name:'test',discription:'',direction:'column',type:'origin',// originBg:'#71EA71',originDivWidth:40,originDivHeight:40,originWidth:6,originHeight:6,smallLoading:false,loadingMaskBg:'rgba(0,0,0,0.2)'});setTimeout(function(){removeLoading('test');},3000);
}function loading4() {$('body').loading({loadingWidth:240,title:'请稍等!',name:'test',discription:'这是一个描述...',direction:'column',type:'origin',originBg:'#71EA71',originDivWidth:40,originDivHeight:40,originWidth:6,originHeight:6,smallLoading:false,loadingBg:'#389A81',loadingMaskBg:'rgba(123,122,222,0.2)'});setTimeout(function(){removeLoading('test');},3000);
}function loading5() {$('body').loading({loadingWidth:240,title:'请稍等!',name:'test',discription:'这是一个描述...',direction:'column',type:'pic',originBg:'#71EA71',originDivWidth:60,originDivHeight:60,originWidth:6,originHeight:6,smallLoading:false,loadingBg:'#389A81',loadingMaskBg:'rgba(123,122,222,0.2)'});setTimeout(function(){removeLoading('test');},3000);
}function loading6() {$('body').loading({loadingWidth:240,title:'请稍等!',name:'test',discription:'这是一个描述...',direction:'row',type:'pic',originBg:'#71EA71',originDivWidth:60,originDivHeight:60,originWidth:6,originHeight:6,smallLoading:false,loadingBg:'rgba(20,125,148,0.8)',loadingMaskBg:'rgba(123,122,222,0.2)'});setTimeout(function(){removeLoading('test');},3000);
}function loading7() {$('body').loading({loadingWidth:240,title:'请稍等!',name:'test',discription:'这是一个描述...',direction:'row',type:'origin',originBg:'#71EA71',originDivWidth:30,originDivHeight:30,originWidth:4,originHeight:4,smallLoading:false,titleColor:'#388E7A',loadingBg:'#312923',loadingMaskBg:'rgba(22,22,22,0.2)'});setTimeout(function(){removeLoading('test');},3000);
}function loading8(){$('body').loading({loadingWidth:220,title:'提示',name:'test',titleColor:'#fff',discColor:'#EDEEE9',discription:'颜色搭配,我不太懂',direction:'column',type:'origin',originBg:'#ECCFBB',originDivWidth:40,originDivHeight:40,originWidth:6,originHeight:6,smallLoading:false,loadingBg:'rgba(56,43,14,0.8)',loadingMaskBg:'rgba(66,66,66,0.2)'});setTimeout(function(){removeLoading('test');},3000);
}function loading10(){$('body').loading({loadingWidth:240,title:'请稍等!',name:'test',animateIn:'none',discription:'这是一个描述...',direction:'row',type:'origin',mustRelative:true,originBg:'#71EA71',originDivWidth:30,originDivHeight:30,originWidth:4,originHeight:4,smallLoading:false,titleColor:'#388E7A',loadingBg:'#312923',loadingMaskBg:'rgba(22,22,22,0.2)'});setTimeout(function(){removeLoading('test');},3000);
}
</script></body>
</html>

页面请求加载框，并屏蔽页面点击相关推荐

js脚本屏蔽页面点击
在页面中将下面函数定义好后,通过"javascript:delayKey();"调用 <script type="text/javascript"> ...
QTP的那些事---页面弹出框的处理，页面等待加载的处理
处理方法:先判断父类对象是否存在,如果存在,判断相关的static文本对象是否存在,如果存在,则点击弹出框中的按钮即可: 例如如下的代码: 设置循环判断dialog对象是否存在,如果存在,就去点击相关 ...
Ajax全局加载框(Loading效果)的配置
在Ajax进行后台数据请求的过程中,我们有时候会希望用户能知道页面后台还在做一些事情,这时候就需要给用户一个非常明确的提示,也就是我们所谓的进度条废话完成~ 实现原理: Jquery可以对ajax进 ...
浏览器页面资源加载过程与优化
评价页面性能好坏的核心之一就是页面的加载速度,而页面加载速度的关键就是页面资源的加载.本文将从浏览器浏览器页面资源加载过程展开分析,来引出页面关键请求路径的概念,并给出如何优化该关键请求路径的一些方法 ...
小程序性能优化之页面预加载方案——让你的小程序运行如飞进阶篇
小程序性能优化之页面预加载方案进阶篇转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80798452 写在前面预加载方案 ...
前端技术-HTML页面的加载
HTML页面的加载 HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染. http协议的请求过程是基于TCP协议的.http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉 ...
vue网页预加载页面_页面预加载效果
vue网页预加载页面 View demo 查看演示Download Source 下载源 Today we want to show you how to create a very simple p ...
页面预加载loading动画，再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
ios 微信浏览器预加载_小程序页面预加载技术
lightning-load-project 集成方式看不效果览图的话,请看博客 https://blog.csdn.net/sinat_27612147/article/details/80802 ...

页面请求加载框，并屏蔽页面点击

页面请求加载框，并屏蔽页面点击相关推荐

最新文章

热门文章