当前位置：首页 > 网页特效 > 进度条

HTML5 SVG带圆形进度条动画的提交按钮特效

分类：进度条日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
制作这个提交按钮特效的HTML结构需要一个包裹容器，里面有一个提交按钮和三个svg元素。

```html
<div id="progress-button" class="progress-button">
  
  <button><span>Submit</span></button>
 
  
  <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"></path>
  </svg>
 
  
  <svg class="checkmark" width="70" height="70">
    <path d="m31.5,46.5l15.3,-23.2"></path>
    <path d="m31.5,46.5l-8.5,-7.1"></path>
  </svg>
 
  
  <svg class="cross" width="70" height="70">
    <path d="m35,35l-9.3,-9.3"></path>
    <path d="m35,35l9.3,9.3"></path>
    <path d="m35,35l-9.3,9.3"></path>
    <path d="m35,35l9.3,-9.3"></path>
  </svg>
</div>   
```          
#####  CSS样式
首先提交按钮容器需要设置为inline-block样式。

```html
.progress-button {
  position: relative;
  display: inline-block;
  text-align: center;
}     
```
然后在为提交按钮提供一些基本样式，并设置过渡动画效果。

```html
.progress-button button {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 250px;
  height: 70px;
  border: 2px solid #1ECD97;
  border-radius: 40px;
  background: transparent;
  color: #1ECD97;
  letter-spacing: 1px;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  -webkit-transition: background-color 0.3s, 
                      color 0.3s, width 0.3s, 
                      border-width 0.3s, 
                      border-color 0.3s;
  transition: background-color 0.3s, 
              color 0.3s, width 0.3s, 
              border-width 0.3s, 
              border-color 0.3s;
}             
``` 
在鼠标滑过提交按钮的时候，修改按钮的背景颜色和文字颜色。

```html
.progress-button button:hover {
  background-color: #1ECD97;
  color: #fff;
}        
```       
所有的SVG元素都采用绝对定位方式来居中对齐，并且不允许有任何的pointer-events。

```html
.progress-button svg {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}       
```         
SVG的路径没有任何的填充色，只有描边。开始的时候它们是被隐藏起来的，透明度被设置为0。

```html
.progress-button svg path {
  opacity: 0;
  fill: none;
}   
```             
圆形进度条通过设置描边为5个单位来创建。

```html
.progress-button svg.progress-circle path {
  stroke: #1ECD97;
  stroke-width: 5;
}  
```              
当开始loading线程的时候，按钮会变形为圆形，和圆形进度条相同的大小。
```html

.loading.progress-button button {
  width: 70px; /* 制作一个圆形 */
  border-width: 5px;
  border-color: #ddd;
  background-color: transparent;
  color: #fff;
}     
```           
变为圆形后，调教按钮上的文字要快速隐藏起来。

```html
.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()方法来初始化这个提交按钮特效。

```html
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();
}       
```         
其它js代码请参考下载文件。

web299.com

HTML5 SVG带圆形进度条动画的提交按钮特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果