這是一款非常實(shí)用的HTML5 SVG帶圓形進(jìn)度條動(dòng)畫的提交按鈕特效。該提交按鈕在被點(diǎn)擊之后，按鈕變形為一個(gè)圓形的進(jìn)度條，當(dāng)進(jìn)度條運(yùn)行一周之后，可以設(shè)置提交成功和提交失敗的兩種按鈕狀態(tài)。
制作方法
HTML結(jié)構(gòu)
制作這個(gè)提交按鈕特效的HTML結(jié)構(gòu)需要一個(gè)包裹容器，里面有一個(gè)提交按鈕和三個(gè)<svg>元素。
- <div id="progress-button" class="progress-button">
- <!-- 提交按鈕 -->
- <button><span>Submit</span></button>
- <!-- svg 圓形進(jìn)度條 -->
- <svg class="progress-circle" width="70" height="70">
- <path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"/>
- </svg>
- <!-- 提交成功的標(biāo)記 -->
- <svg class="checkmark" width="70" height="70">
- <path d="m31.5,46.5l15.3,-23.2"/>
- <path d="m31.5,46.5l-8.5,-7.1"/>
- </svg>
- <!-- 提交失敗的標(biāo)記 -->
- <svg class="cross" width="70" height="70">
- <path d="m35,35l-9.3,-9.3"/>
- <path d="m35,35l9.3,9.3"/>
- <path d="m35,35l-9.3,9.3"/>
- <path d="m35,35l9.3,-9.3"/>
- </svg>
- </div>
CSS樣式
首先提交按鈕容器需要設(shè)置為inline-block樣式。
- .progress-button {
- position: relative;
- display: inline-block;
- text-align: center;
- }
然后在為提交按鈕提供一些基本樣式，并設(shè)置過渡動(dòng)畫效果。
- Undo
- Redo全屏常用
- 純文本
- 微軟雅黑3 Hr
- B I U Color BgColor Url Unlink
- Table
- Removeformat
- AutotypesetLeftCenterRight
- FloatLeftFloatRightOrderedlistUnorderedlist表情圖片附件引用代碼
在鼠標(biāo)滑過提交按鈕的時(shí)候，修改按鈕的背景顏色和文字顏色。
- .progress-button button:hover {
- background-color: #1ECD97;
- color: #fff;
- }
所有的SVG元素都采用絕對(duì)定位方式來居中對(duì)齊，并且不允許有任何的pointer-events。
- .progress-button svg {
- position: absolute;
- top: 0;
- left: 50%;
- -webkit-transform: translateX(-50%);
- transform: translateX(-50%);
- pointer-events: none;
- }
SVG的路徑?jīng)]有任何的填充色，只有描邊。開始的時(shí)候它們是被隱藏起來的，透明度被設(shè)置為0。
- .progress-button svg path {
- opacity: 0;
- fill: none;
- }
圓形進(jìn)度條通過設(shè)置描邊為5個(gè)單位來創(chuàng)建。
- .progress-button svg.progress-circle path {
- stroke: #1ECD97;
- stroke-width: 5;
- }
當(dāng)開始loading線程的時(shí)候，按鈕會(huì)變形為圓形，和圓形進(jìn)度條相同的大小。
- .loading.progress-button button {
- width: 70px; /* 制作一個(gè)圓形 */
- border-width: 5px;
- border-color: #ddd;
- background-color: transparent;
- color: #fff;
- }
變?yōu)閳A形后，調(diào)教按鈕上的文字要快速隱藏起來。
- .loading.progress-button span {
- -webkit-transition: opacity 0.15s;
- transition: opacity 0.15s;
- }
- .loading.progress-button span,
- .success.progress-button span,
- .error.progress-button span {
- opacity: 0; /* keep it hidden in all states */
- }
JAVASCRIPT
在javascript代碼中，button是HTML元素，progressEl是SVG元素，它是代表圓形的進(jìn)度條。successEl和errorEl分別代表提交成功和失敗的標(biāo)記，也是SVG元素。js代碼中通過UIProgressButton()方法來初始化這個(gè)提交按鈕特效。
- function UIProgressButton( el, options ) {
- this.el = el;
- this.options = extend( {}, this.options );
- extend( this.options, options );
- this._init();
- }
- UIProgressButton.prototype._init = function() {
- this.button = this.el.querySelector( 'button' );
- this.progressEl = new SVGEl( this.el.querySelector( 'svg.progress-circle' ) );
- this.successEl = new SVGEl( this.el.querySelector( 'svg.checkmark' ) );
- this.errorEl = new SVGEl( this.el.querySelector( 'svg.cross' ) );
- // init events
- this._initEvents();
- // enable button
- this._enable();
- }
本文版權(quán)屬于jQuery之家，轉(zhuǎn)載請(qǐng)注明出處：http://www.htmleaf.com/html5/SVG/201507172244.html
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。