HTML5SVG: submit button effect with circular progress bar animation-

This is a very practical HTML 5 SVG button effect with a circular progress bar animation. After the button is clicked, the button is transformed into a circular progress bar. After the progress bar is running for one week, you can set the status of the buttons that are submitted successfully or failed to be submitted. View the presentation ......,. Brief tutorial

This is a very practical HTML5 SVG button effect with circular progress bar animation. After the button is clicked, the button is transformed into a circular progress bar. After the progress bar is running for one week, you can set the status of the buttons that are submitted successfully or failed to be submitted.

Production Method

HTML Structure

The HTML structure for making this submit button special effect requires a package container, which contains a submit button and three Element.

  
    Submit   
    
      
     
     
    
      
       
     
     
    
      
       
       
       
     
  

CSS style

First, the submit button container needs to be set to the inline-block style.

.progress-button {  position: relative;  display: inline-block;  text-align: center;}

Then, provide some basic styles for the submit button and set the transition animation effect.

.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;}

When you move the mouse over the submit button, modify the background color and text color of the button.

.progress-button button:hover {  background-color: #1ECD97;  color: #fff;}

All SVG elements are centered and aligned in absolute positioning mode, and no pointer-events are allowed.

.progress-button svg {  position: absolute;  top: 0;  left: 50%;  -webkit-transform: translateX(-50%);  transform: translateX(-50%);  pointer-events: none;}

The SVG path does not have any fill color, but only the stroke. They are hidden at the beginning, and the transparency is set to 0.

.progress-button svg path {  opacity: 0;  fill: none;}

The circular progress bar is created by setting the stroke to 5 units.

.progress-button svg.progress-circle path {  stroke: #1ECD97;  stroke-width: 5;}

When the loading thread starts, the button will be deformed into a circle, the same size as the Circular progress bar.

. Loading. progress-button {width: 70px;/* Create a circle */border-width: 5px; border-color: # ddd; background-color: transparent; color: # fff ;}

After it is changed to a circle, the text on the "adjust" button should be quickly hidden.

.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

In javascript code, a button is an HTML element, and a progressEl is an SVG element. It represents a circular progress bar. SuccessEl and errorEl indicate the successfully submitted and failed tags respectively, and are also SVG elements. In js Code, the UIProgressButton () method is used to initialize the special effect of the submit button.

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();}

For other js Code, see download an object.

The above is the special effect of the button submitted by HTML5 SVG with a circular progress bar animation. For more information, see PHP Chinese website (www.php1.cn )!