這是一款非常實用的HTML5 SVG帶圓形進度條動畫的提交按鈕特效。該提交按鈕在被點擊之后，按鈕變形為一個圓形的進度條，當進度條運行一周之后，可以設置提交成功和提交失敗的兩種按鈕狀態。
制作方法
HTML結構
制作這個提交按鈕特效的HTML結構需要一個包裹容器，里面有一個提交按鈕和三個<svg>元素。
- <div id="progress-button" class="progress-button">
- <!-- 提交按鈕 -->
- <button><span>Submit</span></button>
- <!-- svg 圓形進度條 -->
- <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>
- <!-- 提交成功的標記 -->
- <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>
- <!-- 提交失敗的標記 -->
- <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樣式
首先提交按鈕容器需要設置為inline-block樣式。
- .progress-button {
- position: relative;
- display: inline-block;
- text-align: center;
- }
然后在為提交按鈕提供一些基本樣式，并設置過渡動畫效果。
- Undo
- Redo全屏常用
- 純文本
- 微軟雅黑3 Hr
- B I U Color BgColor Url Unlink
- Table
- Removeformat
- AutotypesetLeftCenterRight
- FloatLeftFloatRightOrderedlistUnorderedlist表情圖片附件引用代碼
在鼠標滑過提交按鈕的時候，修改按鈕的背景顏色和文字顏色。
- .progress-button button:hover {
- background-color: #1ECD97;
- color: #fff;
- }
所有的SVG元素都采用絕對定位方式來居中對齊，并且不允許有任何的pointer-events。
- .progress-button svg {
- position: absolute;
- top: 0;
- left: 50%;
- -webkit-transform: translateX(-50%);
- transform: translateX(-50%);
- pointer-events: none;
- }
SVG的路徑沒有任何的填充色，只有描邊。開始的時候它們是被隱藏起來的，透明度被設置為0。
- .progress-button svg path {
- opacity: 0;
- fill: none;
- }
圓形進度條通過設置描邊為5個單位來創建。
- .progress-button svg.progress-circle path {
- stroke: #1ECD97;
- stroke-width: 5;
- }
當開始loading線程的時候，按鈕會變形為圓形，和圓形進度條相同的大小。
- .loading.progress-button button {
- width: 70px; /* 制作一個圓形 */
- border-width: 5px;
- border-color: #ddd;
- background-color: transparent;
- color: #fff;
- }
變為圓形后，調教按鈕上的文字要快速隱藏起來。
- .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元素，它是代表圓形的進度條。successEl和errorEl分別代表提交成功和失敗的標記，也是SVG元素。js代碼中通過UIProgressButton()方法來初始化這個提交按鈕特效。
- 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();
- }
本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/html5/SVG/201507172244.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。