用html和 css 绘制 半径50px 边框为1 的圆形 要代码

样例

代码：

<style>

.circle{width:50pxheight:50pxmargin: 50px autoborder-radius:50%border:1px solid #f00}

</style>

<div class="circle"></div>

步骤 1: 在 HTML 中设置画布，创建一个引用，并获取上下文对象

画布在 HTML 中通过 <canvas>标签定义。与其他标签类似，<canvas>的属性（如宽度和高度）作为特性输入。假设你希望创建一个宽 500 像素、高 500 像素的画布，并将其命名为“can1”，稍后在 JavaScript 中引用它时将用到。

在 HTML 文档中输入 <canvas>标签。

<canvas id="can1" width="500" height="500"></canvas>

在 JavaScript 文档中，创建一个变量，在编写脚本时该变量将代替“can1”。这里，我们将该变量命名为“myCanvas”，并使用 getElementById 将其链接到“can1”。

var myCanvas = document.getElementById("can1")

画布的 CanvasRenderingContext2D 对象具有 *** 作画布的所有命令。 这里，在上下文对象中检索“can1”。将此变量称为“myContext”。

var myContext = myCanvas.getContext("2d")

步骤 2: 绘制矩形、直线、贝塞尔曲线、圆和形状

在画布上绘制简单的线条非常容易。使用 JavaScript 的 moveTo 方法可设置线条开始位置的坐标。然后只需使用另一方法设置终点。 第二步可以使用若干方法，每种方法专用于帮助呈现一种不同的线型，无论是直线、贝塞尔曲线还是圆弧。若要将线条合并为形状，可以闭合对 beginPath 和 closePath 方法调用中的线条。在指定所需的外观之后，可以使用 fill 方法应用颜色，并使用 stroke 方法执行线条和形状的呈现。

应用一些基本风格。这里，通过使用 fillStyle 属性绘制一个黑色矩形，将画布背景设置为黑色 (#000)。然后使用 strokeStyle 属性将线条颜色设置为白色 (#fff)，使用 fillRect 方法应用黑色背景，并使用 lineWidth 属性将线条的粗细设置为 3 个像素。

// Specify a black background, and white lines that are 3 pixels thick.

myContext.fillStyle   = '#000'

myContext.strokeStyle = '#fff'

myContext.fillRect(0,0,500,500)

myContext.lineWidth  = 3myContext.fill()

在后续步骤中，将在这个 500×500 的黑色画布上继续构建。

现在，准备在画布的黑色表面绘制一个白色线条。先从直线开始。

使用 moveTo 方法设置直线的起点，使用 lineTo 方法设置终点。

这些方法采用两个数字作为参数。第一个数字表示 x 轴坐标，或者表示此坐标定义的自画布左侧算起的像素数。第二个数字是从顶部开始测量的 y 轴坐标。

// Draw a line that starts at the upper left corner of the canvas and ends at the lower right. 

myContext.moveTo(0,0)

myContext.lineTo(500,500)

myContext.stroke()

若要绘制二次贝塞尔曲线，请使用 quadraticCurveTo 方法，该方法采用两个坐标—曲线的一个控制点和一个端点。

// Draw a swooping curve that spans the width of the canvas.

myContext.moveTo(0,0)

myContext.quadraticCurveTo(0,500,500,250)

myContext.stroke()

若要绘制三次贝塞尔曲线，请使用 bezierCurveTo 方法，该方法采用三个坐标—曲线的两个控制点和一个端点。

// Draw a V-shaped Bezier curve that spans the entire canvas.

myContext.moveTo(0,0)

myContext.bezierCurveTo(500, 820, 0, 500, 500, 0)

myContext.stroke()

若要创建一个圆，请使用 arc 方法：在设置用于绘制圆形轮廓的原点时，请确保将 moveTo 方法设置在沿线条路径的位置上，否则圆上将有一条通向 moveTo坐标的“尾巴”。

// Draw a circle that spans the width of the canvas.

myContext.moveTo(500,250)

myContext.arc(250,250,250,0,Math.PI*2,true)

myContext.stroke()

通过闭合对 beginPath 和 closePath 调用中的多个线条，可以从上述线条的任意组合中绘制一个 2D 形状。然后，整个形状可以使用 fill 接收一种颜色。前面设置的笔划样式将创建白色线条，在与应用于主体的红色 (#f00) 合并时，该形状将继承双色调外观。

//  Draw a red diamond that spans the entire canvas.

myContext.fillStyle = '#f00'

myContext.beginPath()

myContext.moveTo(250,0)

myContext.lineTo(0,250)

myContext.lineTo(250,500)

myContext.lineTo(500,250)

myContext.closePath()

myContext.fill()

步骤 3: 显示位图图像

位图图像（如 .jpg、.png 和 .gif 文件）可以放置在画布上，甚至可以在代码中缩放和裁剪，不会触及原始文件。若要添加位图图像，请指定该图像的 URI，然后使用 drawImage 方法在画布上指定其位置。使用可选参数可将图像缩放到指定的大小，甚至仅显示图像的一个片段，这对于实现滚动背景或使用子画面表动态显示子画面等 *** 作非常有用。

若要在屏幕上绘制位图图像而不进行任何修改，请指定要用于左上角的 x 坐标和 y 坐标。

// Draw an image at the upper left corner of the canvas (0, 0).

var myImg = new Image()

myImg.src = 'myImageFile.png'

myContext.drawImage(myImg, 0, 0)

若要缩放图像，可在末尾添加两个数字，分别代表宽度和高度。如果有帮助，不妨将后两个数字视为“右部”和“底部”，而不是“宽度”和“高度”。

// Scale the image to span the entire 500 x 500 canvas.

var myImg = new Image()

myImg.src = 'myImageFile.png'

myContext.drawImage(myImg, 0, 0, 500, 500)

若要仅使用图像的一个切片，则需要定义两个矩形区域，对 drawImage 的调用提高到 9 个参数（第一个参数是 JavaScript 图像对象）。要传入的前四个数字表示图像的切片。后四个数字表示要显示该切片的画布区域。

// Take a 20 x 20 slice from the upper left of the image and scale it to span the entire 500 x 500 canvas.

var myImg = new Image()

myImg.src = 'myImageFile.png'

myContext.drawImage(myImg, 0, 0, 20, 20, 0, 0, 500, 500)

步骤 4: 渐变

任何人只要熟悉在图形设计程序中定义渐变的常见方式，都会喜欢使用 JavaScript 代码定义渐变的简单性。在设计程序中是选择颜色，渐变中的颜色位置使用水平滑块设置。JavaScript 中的唯一区别是使用从 0 到 1 范围内的小数值代替滑块。

在设计程序中，线性渐变使用线条在图像上定位，线条的开始和结束位置确定方向和缩放级别。在 JavaScript 中，该线条使用两对 x、y 轴坐标绘制。然后将 4 个数字传递到 createLinearGradient 方法以创建 CanvasGradient 对象。在定义渐变对象的属性之后，就会得到所需的渐变，CanvasGradient 作为 fillStyle 传递到 fillRect 方法进行呈现。

// Render a white, red and black gradient diagonally across the canvas.

var myGradient = myContext.createLinearGradient(0,0, 500,500) // gradient starts at upper left and ends at lower right

myGradient.addColorStop(0,"#fff")   // white at the beginning of the gradient

myGradient.addColorStop(0.5,"#f00")// red in the middle of the gradient

myGradient.addColorStop(1,"#000")  // black at the end of the gradient

myContext.fillStyle = myGradient   // ensure the next call to fillRect will use the specified gradient

myContext.fillRect(0,0,500,500)   // rectangle that contains the gradient spans the entire canvas

径向渐变的定义方式稍有不同。为渐变的起点和终点绘制两对 x、y 轴坐标—，这与线性渐变中一样—，但每个坐标对都有第三个与其关联的 z 轴坐标，用于定义半径。可以想像为围绕一个坐标绘制一个圆，该坐标位于中心 (250, 250)，绘制的圆的大小以像素为单位定义。这样定义两个圆之后，一个圆较小，一个圆跨整个画布，有 6 个数字传递到 createRadialGradient。在呈现时，径向渐变在两个圆之间的空间中绘制，颜色等级与圆的半径的大小成正比。

// Render a white, red and black radial gradient spanning the canvas.

var myGradient = myContext.createRadialGradient(250,250,0, 250,250,500) // gradient is centered and spans the entire canvas 

myGradient.addColorStop(0,"#fff")   // white at the beginning of the gradient

myGradient.addColorStop(0.5,"#f00")  // red in the middle of the gradient

myGradient.addColorStop(1,"#000")   // black at the end of the gradient

myContext.fillStyle = myGradient    // ensure the next call to fillRect will use the specified gradient

myContext.fillRect(0,0,500,500)    // rectangle that contains the gradient spans the entire canvas

步骤 5: 动画

可以使用多种方法绘制动画。

对于画布内的元素，JavaScript 提供了 setInterval 方法，该方法计划一个重复调用的函数，每经过定义的时间间隔便调用一次该函数。在该函数中，需要重绘画布来反映对其上呈现的对象的更改。下面是一个示例，其中一个函数初始化该动画，将呈现频率计划为大约每秒 60 帧（每 13.33 毫秒一帧），并且重复调用该函数将重绘画布。在本例中，径向渐变从一个小点逐渐增大，直到填充整个画布。

// Generate an animation of a growing gradient.

// These variables must exist globally so both functions can access them.

var myCanvas 

var myContext

var outerBoundary = 0, innerBoundary = 0

// Start the animation.

window.onload = initialize

function initialize() {

    myCanvas = document.getElementById("can1")

    myContext = myCanvas.getContext("2d")

    setInterval("redrawCanvas()",13)    // redraw @ approximately 60 frames per second

}                                        

                                         

// Run the animation.                   

function redrawCanvas() {              

    if (outerBoundary < 500) {            

        outerBoundary++             // grow the size of the gradient

    } else {                             

        innerBoundary++             // grow the size of the inner white circle if red is maxed

    }                                    

    var myGradient = myContext.createRadialGradient(250,250,innerBoundary, 250,250,outerBoundary)

    myGradient.addColorStop(0,"#fff")   // white at the beginning of the gradient

    myGradient.addColorStop(0.5,"#f00") // red in the middle of the gradient

    myGradient.addColorStop(1,"#000")   // black at the end of the gradient

    myContext.fillStyle = myGradient    // ensure the next call to fillRect will use the specified gradient

    myContext.fillRect(0,0,500,500)     // rectangle that contains the gradient spans the entire canvas

}

CSS3 转换和动画可用于转换画布本身和画布外部的对象。

此外，新的 WinJS 库有许多高度优化的动画，创建这些动画是为了模拟原有 Windows 动画的行为。 WinJS 动画有助于为你的应用 UI 提供一个高度集成的外观。有关详细信息，请参阅WinJS.UI.Animation 命名空间。

步骤 6: 更多 HTML5 画布提示

可以使用一系列属性（shadowColor、shadowBlur、shadowOffsetX 和 shadowOffsetY）应用阴影。

可以使用 createPattern 方法作为一种模式重复画布中的元素。

可以使用 save 方法保存画布状态，然后执行更改，再使用 restore 方法还原以前的状态。该方法很好用，函数甚至不需要采用参数。

可以使用 globalCompositeOperation 属性定义两个画布元素重叠时会发生什么情况。 使用此属性始终可以定义在源或新元素级别发生的情况。可以执行的 *** 作有颜色混合、遮蔽和更改重叠优先级等。

注意  globalCompositeOperation 主题使用源表示新元素，使用目标表示以前存在的元素。

可以使用 strokeText 方法将文本添加到画布。

教程参考Colin Garven提出的实现圆形进度按钮的思路。我们将使用Jake Archibald讲过的SVG素描动画技术来实现圆形进度过程，然后提供一个成功或失败的状态来显示完成后的最终状态。

今天给大家展示如何实现一个漂亮的进度按钮的思路，这个思路来自于Colin Garven的不可思议的提交按钮。我们首先看一下实现这个思路需要的步骤，顺便欣赏一下这个动画^^。正如Colin在评论中提到的，实现这个按钮背后的想法如下：一旦点击，提交按钮就变成一个圆环，并且使用这个圆环的边界展示一个进度动画。当这个进度动画完成时，按钮将再次恢复成原来大小，同时会显示一个标记用来确认提交已完成。接下来我们将完成这个思路，并且针对提交失败的情况我们添加另一个标记。

如果只考虑CSS技术，也是有可能实现这样的按钮和动画效果的。其中最具挑战的部分还是环形的进度效果，这里提供一个聪明的技巧——使用Clip属性来实现进度效果。关于这个技巧，Anders Ingemann写了一篇详实的教程。但是这次我们还是基于SVG技术,CSS转换和一点儿JavaScript来实现。关于环形进度效果和叉号，我们将使用Jake Archibald介绍的动画素描技术。

需要注意的是动画SVG在浏览器的兼容上还是存在问题，这些类型的技术仍在起步阶段，所以本教程只用来实验练习，期待在未来可以派上用场。

所以，让我们开始吧。

如果你有仔细观察Colin的Dribbble上展示的效果动画，可能已经注意到，我们需要关注按钮的几个状态。

有意思的部分是按钮从一个状态转换成另一个状态。

首先，我们要使用透明背景和边框颜色来展示一个简单的按钮，鼠标悬停时，我们使用边框色来填充该按钮，并且把按钮上的文本变成白色。

AnimatedProgressButton01_hover (1)

当我们点击按钮(例如,为了提交一个表单)，我们要淡出文本，减少按钮的宽度使它变成一圆圈，并且使按钮的边框变厚，在边框上开始一个进度动画。我们将使用SVG圆圈来实现进度动画，因此我们需要确保动画开始的瞬间，按钮圆圈和SVG圆圈大小一致，位置一致。然后我们绘制圆的边线，模拟提交的过程。

AnimatedProgressButton02_progress

一旦提交完成，即边线都绘制完。我们必须使按钮再次扩大到原来大小，并且在提交成功时绘制对号，把按钮的颜色变成相应的颜色。

AnimatedProgressButton03_success

提交失败的情况下,我们也需要一个错误状态的风格。

AnimatedProgressButton04_error

接下来，让我们创建标记与我们所需要的元素。

为创建我们的标记，我们需要一个主容器，一个按钮(其中有包含文本的一个span元素)和三个SVG:

<!-- progress button -->

<div id="progress-button" class="progress-button">

<!-- button with text -->

<button><span>Submit</span></button>

<!-- svg circle for progress indication -->

<svg class="progress-circle" width="70" height="70">

<path d="m35,2.5c17.,0 32.5,14. 32.5,32.5c0,17. -14.,32.5 -32.5,32.5c-17.,0 -32.5,-14. -32.5,-32.5c0,-17. 14.,-32.5 32.5,-32.5z"/>

</svg>

<!-- checkmark to show on success -->

<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>

<!-- cross to show on error -->

<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><!-- /progress-button -->

我们预先使用Method Draw（一个易于使用的在线SVG编辑器）绘制对号和叉号。所有SVG的尺寸为70×70，因为我们按钮的高度为70像素。我们希望圆的边线为5像素，这样看起来更像Colin的效果。当我们在图形编辑器中绘制时，需要设置正确的半径，整个圆连同它的边线为70像素。需要注意在SVG中边线为半嵌入式（即一半在圆内一半在圆外），例如，边线为2，半径为10的圆，它的宽和高为20+2，而不是10+4（边线的2倍），因此公式为2r+边界。所以在我们的案例中我们知道2r+5 = 70,因此我们需要一个半径为32.5的圆。最终得到的形状为：

<circle cx = "35" cy="35" r="32.5"/>

不幸的是，我们不能仅仅使用这个基本的形状，因为“路径”的起点在浏览器中是不同的，所以我们不能控制“进度动画”的起始点。所以，我们需要把这个圆转成路径，而不是（上面的基本形状）。你可以使用Method Draw中Object菜单下的Convert to Path很容易实现。

叉号我们将使用4个路径，这样我们可以从中心点开始绘制，使它看起来跟对号的动画类似。

现在我们有了我们需要的所有元素。让我们想想 *** 作的流程，开始样式！

首先，我们需要给按钮容器添加样式。它就像按钮的外层皮肤，让我们使它更像一个按钮，我们把它的显示设置为inline-block。这样我们可以在文档流里使用它。

.progress-button {

position: relative

display: inline-block

text-align: center

}

我们的按钮需要一些着色和排版，为了让它看起来更像Colin的按钮，我们需要设置正确的边框，使用Montserrat字体：

.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

}

我们还需要为那些将使用动画的属性添加一个过渡效果，如background-color,width等等。

在鼠标悬停时，我们将更改背景色和字体色：

.progress-button button:hover {

background-color: #1ECD97

color: #fff

}

让我们移除任何高亮的轮廓：

.progress-button button:focus {

outline: none

}

所有的SVG需要绝对定位在中心位置，并且我们将不允许任何pointer-events：

.progress-button svg {

position: absolute

top: 0

left: 50%

-webkit-transform: translateX(-50%)

transform: translateX(-50%)

pointer-events: none

}

因为我们只想 *** 作边线，所以路径不应该有任何填充。路径除了在特殊状态下，其他状态都不需要展示它们，所以我们通过设置它们的透明度为0来隐藏它们。

.progress-button svg path {

opacity: 0

fill: none

}

我们的进度环将通过设置圆形路径的边线为5来实现：

.progress-button svg.progress-circle path {

stroke: #1ECD97

stroke-width: 5

}

成功/错误的指示符号将由细的白色边线绘制，我们还将设置边线的linecap为round,这样看起来更加柔和。这两个符号都会有一个快速的不透明度的过渡效果。

.progress-button svg.checkmark path,

.progress-button svg.cross path {

stroke: #fff

stroke-linecap: round

stroke-width: 4

-webkit-transition: opacity 0.1s

transition: opacity 0.1s

}

现在让我们回顾一下，记住我们的总体规划。我们需要可以“样式化”按钮和它的特殊元素的三种额外状态（除了默认状态），加载状态，成功和错误的状态。因此我们将使用类“loading”,”success”,”error”来表示这三种状态。

当我们开始加载过程时，这个按钮将转变成一个圆，看起来更像一个表示进度的圆环。

.loading.progress-button button {

width: 70px/* make a circle */

border-width: 5px

border-color: #ddd

background-color: transparent

color: #fff

}

还记得么，我们在定义按钮样式时已经设置了过渡效果。

当我们开始进度动画时，文本应该快速淡出。

.loading.progress-button span {

-webkit-transition: opacity 0.15s

transition: opacity 0.15s

}

……通过设置opacity为0：

.loading.progress-button span,

.success.progress-button span,

.error.progress-button span {

opacity: 0/* keep it hidden in all states */

}

当从加载状态变成成功或错误的状态时，我们不需要设置过渡，只需把文本简单的隐藏掉就可以。

当我们删除所有类返回到默认状态时，我们需要稍长一点儿的时间来显示文本。所以我们需要定义不同的过渡和延时时间来回到正常的显示状态。

/* Transition for when returning to default state */

.progress-button button span {

-webkit-transition: opacity 0.3s 0.1s

transition: opacity 0.3s 0.1s

}

当我们到达最后的状态，提交成功或失败。这时我们需要重新定义一下按钮的过渡效果。

.success.progress-button button,

.error.progress-button button {

-webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s

transition: background-color 0.3s, width 0.3s, border-width 0.3s

}

接下来我们为最终状态设置颜色相关的样式：

.success.progress-button button {

border-color: #1ECD97

background-color: #1ECD97

}

.error.progress-button button {

border-color: #FB797E

background-color: #FB797E

}

当我们应用相应类的同时，需要展示SVG路径，并通过下面设置的过渡效果来实现stroke-dashoffset的动画。

.loading.progress-button svg.progress-circle path,

.success.progress-button svg.checkmark path,

.error.progress-button svg.cross path {

opacity: 1

-webkit-transition: stroke-dashoffset 0.3s

transition: stroke-dashoffset 0.3s

}

通过定义一个额外的样式类为按钮的宽度动画添加一些可选的easing

.elastic.progress-button button {

-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1), border-width 0.3s, border-color 0.3s

-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s

transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s

}

.loading.elastic.progress-button button {

-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, 0, 0.75, 0.75), border-width 0.3s, border-color 0.3s

-webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s

transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s

}

如果你想研究其他的easing函数，可以使用Ceaser,这个工具是由Matthew Lein提供的CSS Easing动画工具。

目前为止样式已经OK，让我们继续我们的魔术^^

JAVASCRIPT

我们将首先初始化/缓存一些元素:button是一个HTML的按钮元素，progressEl是SVG元素用来表示圆形进度条，successEl,errorEl两个SVG元素分别用来表示对号和叉号。

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

}

}

SVGEl.prototype._init = function() {

var self = this

this.paths.forEach( function( path, i ) {

self.pathsArr[i] = path

path.style.strokeDasharray = self.lengthsArr[i] = path.getTotalLength()

} )

// undraw stroke

this.draw(0)

}

// val in [0,1] : 0 - no stroke is visible, 1 - stroke is visible

SVGEl.prototype.draw = function( val ) {

for( var i = 0, len = this.pathsArr.lengthi <len++i ){

this.pathsArr[ i ].style.strokeDashoffset = this.lengthsArr[ i ] * ( 1 - val )

}

}

接下来我们需要给按钮绑定click事件。这个按钮最初为一个圆形动画（通过添加loading类）。该动画结束后，现有的回调函数被调用（如果在options里有指定的话）或者我们只是将进行到100%（这个“假”动画的速度与css中定义的stroke-dashoffset的过渡是相同的），在这个点时按钮是不可点击的。

UIProgressButton.prototype._initEvents = function() {

var self = this

this.button.addEventListener( 'click', function() { self._submit()} )

}

UIProgressButton.prototype._submit = function() {

classie.addClass( this.el, 'loading' )

var self = this,

onEndBtnTransitionFn = function( ev ) {

if( support.transitions ) {

this.removeEventListener( transEndEventName, onEndBtnTransitionFn )

}

this.setAttribute( 'disabled', '' )

if( typeof self.options.callback === 'function' ) {

self.options.callback( self )

}

else {

self.setProgress(1)

self.stop()

}

}

if( support.transitions ) {

this.button.addEventListener( transEndEventName, onEndBtnTransitionFn )

}

else {

onEndBtnTransitionFn()

}

}

一旦进度达到100%,我们需要重置的圆形进度条的路径。同时,我们会显示成功的对号标识或错误的叉号标识的路径。一段时间后(options.statusTime)我们“拉开”任何状态指示器的路径，再次启用按钮。注意,如图所示,我们通过CSS控制转换。

UIProgressButton.prototype.stop = function( status ) {

var self = this,

endLoading = function() {

self.progressEl.draw(0)

if( typeof status === 'number' ) {

var statusClass = status >= 0 ? 'success' : 'error',

statusEl = status >=0 ? self.successEl : self.errorEl

statusEl.draw( 1 )

// add respective class to the element

classie.addClass( self.el, statusClass )

// after options.statusTime remove status and undraw the respective stroke and enable the button

setTimeout( function() {

classie.remove( self.el, statusClass )

statusEl.draw(0)

self._enable()

}, self.options.statusTime )

}

else {

self._enable()

}

classie.removeClass( self.el, 'loading' )

}

// give it a little time (ideally the same like the transition time) so that the last progress increment animation is still visible.

setTimeout( endLoading, 300 )

}

按钮完成！

---