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, //中間的背景寬度width
loadingBg: 'rgba(0, 0, 0, 0.6)', //中間的背景色
borderRadius: 12, //中間的背景色的borderRadius
loadingMaskBg: 'transparent', //背景遮罩層顏色
zIndex: 1000001, //層級
// 這是圓形旋轉的loading樣式
originDivWidth: 60, //loadingDiv的width
originDivHeight: 60, //loadingDiv的Height
originWidth: 8, //小圓點width
originHeight: 8, //小圓點Height
originBg: '#fefefe', //小圓點背景色
smallLoading: false, //顯示小的loading
// 這是圖片的樣式 (pic)
imgSrc: 'http://www.daiwei.org/index/images/logo/dw.png', //默認的圖片地址
imgDivWidth: 80, //imgDiv的width
imgDivHeight: 80, //imgDiv的Height
flexCenter: 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 一樣的loading
if($(".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>