el-progress,elprogress percentage
vue 动态控制进度条
template
div
? el-progress :percentage="nuw" color="#8e71c7"/el-progress
? button @click="click" 下一步 /button
/div
/template
data(){
? return {
? ? ? ? ? nuw:0,
}
},
methods: {
? click(){
? ? //定义定时器开始时间为0
? ? var progressnuw =0;
? ? //顶一个定时器
? ? var timer=setInterval(()={
? ? ? //变量一直++
? ? ? progressnuw++
? ? ? //清楚定时器
? ? ? if(progressnuw=100){
? ? ? ? clearInterval(timer);
}
? ? ? //获取重新赋值
? ? ? this.nuw=progressnuw
? ? },30)
}
},
关于element-ui的el-progress组件圆角样式改变
.el-progress-bar__outer?{
??border-radius:?0;
??}
.el-progress-bar__inner?{
??border-radius:?0;
??}
输入这些就可以去掉边框圆角样式
如何创建一个圆形的按钮
教程参考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 --
buttonspanSubmit/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.length; i 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 );
}
按钮完成！
英语重音的规则
英语字母组合与英语单词重音
学习英语时我们常因单词重音位置的飘忽不定而大伤脑筋，尤其是遇上双音节以上的词汇，要准确无误地读准其重音，确实不太容易。
其实，英语词汇的重音位置通常是有规律的。例如：有些双音节词汇做名词时重音往往落在首音节上；而做动词时，重音就落在第二音节上了。这些词汇常见的有：addict，accent，abstract，annex等。
可见，掌握好并读准单词的重音有一定的规律可循。
为了便于记忆和学习，现将部分规则按重音位置和字母顺序作如下归纳，并从理论上进行简要分析。
一、归类部分
1．重音落在末音节的字母组合
①以-ee结尾，读音为/!?/的词汇：
appellee chimpanzee conferee contestee decree drawee evacuee em-ployee goatee grandee guarantee indictee inductee
②以-act结尾，读音为/$kt/的词汇，多为动词：
contact contract detract distract exact enact intact interact
③-air，-aire或-are结尾，读音为/#+/的词汇：
affair concessionaire enclair millionaire aware prepare
④以-ade结尾，读音为/eid/的词汇：
arcade brigade colonnade escalade escapade（exception：decade）
⑤以-ane结尾，读音为/ein/的词汇：
inane insane profane humane
⑥以-ceive结尾，读音为/s!?v/的动词：
conceive deceive perceive receive
⑦以-duce结尾，读音为/dj(?s/的词汇：
conduce deduce induce introduce reduce reproduce subduce traduceseduce
⑧以-ease结尾，读音为/!?s/或/!?z/的词汇：
appease decease decrease disease increase predecease release sub-lease surcease
⑨以-een结尾，读音为/!?n/的名词：
colleen canteen pretteen Salween shagreen thirteen spalpeenvelevteen yestreen
⑩以-eer结尾，读音为/i+/的名词：
cannoneer compeer domineer engineer fronteer gadgeteer gazetterpamphleteer patrioteer
(11)以-ect结尾，读音为/ekt/的动词：
affect bisect collect defect direct detect correct confect connectdisinfect eject elect
(12)以-ede结尾，读音为/!?d/的动词：
accede antecede concede impede intercede precede recede retrocedesecede supercede
(13)以-end结尾，读音为/end/的动词：
attend amend commend comprehend contend defend depend extendintend represend subtend
(14)以-el结尾，读音为/el/的词汇：
compel impel Nobel marcel propel rebel（v．）
(15)以-ert结尾，读音为/+?t/的词汇：
assert concert convert desert introvert subvert
(16)以-ese结尾，读/!?s/或/!?z/的词汇：
Chinese Japanese Napalese sudanese telegraphese vietnamese
(17)以-clude结尾，读音为/kl(?d/的动词：
conclude exclude include occlude preclude seclude
(18)以-esce结尾，读音为/es/的词汇：
coalesce deliquesce effloresce evanesce recrudesce
(19)以-ess结尾，读音为/es/的动词：
compress confess depress express impress profess redress represssuppress transgress
若不是动词，以-ess结尾，的词汇之重音位置不固定：
'progress 'congress pro'cess un'less
(20)以-est结尾，读音为/est/的动词：
adjest congest contest digest infest protest suggest
(21)以-ette结尾，读音为/et/的词汇：
cassette cigarette brunette coquette chemisette forssette frisettegazette grisette
(22)以-form结尾，读音为/f?m/的动词：
conform perform reform transform（但uniform是名词）
(23)以-ict结尾，读音为/ikt/的动词：
afflict conflict constrict contradict inflict predict restric
(24)以-ide结尾，读音为/aid/的词汇：
aside astride beside confide divide provide reside subside
(25)以-ign结尾，读音为/ain/的动词：
assign condign design consign resign
(26)以-ire结尾，读音为/ai+/的动词：
conspire esquire expire desire inquire inspire require respire
(27)以-lapse结尾，读音为/l$ps/的词汇：
collapse prolapse relapse
(28)以-mit结尾，读音为/mit/的词汇：
admit commit demit emit intermit omit permit pretermit remitsubmit transmit
（若是名词，重音落在首音节，如：'limit 'summit 'vomit）
(29)以-ort结尾，读音为/?t/的动词：
disport distort escort export import report retort support trans-port
（若是名词，重音多落在首音节：escort export import bistort purport等。）
(30)以-ore结尾，读音为/?/的词汇：
afore before deplore explore restore
(31)以-pose结尾，读音为/p+us/、/p+uz/的动词：
depose decompose expose impose interpose oppose indispose predis-pose propose suppose
(32)以-scribe结尾，读音为/skraib/的词汇：
conscribe describe escribe prescribe subscribe transcribe
(33)以-scend结尾，读音为/send/的词汇：
ascend condescend descend transcend
(34)以-oon结尾，读音为/(?n/的词汇：
afternoon balloon buffoon cartoon cocoon decocoon dragoon festoongalloon octoroon pocaroon（exception：forenoon）
(35)以-que结尾，读音为/k/的词汇：
antique boutique blottesque burlesque arabesque cacique critiquegrotesque Japanesque mystique
(36)以-r结尾，现在分词和过去分词均要双写r（-red，-ring）：
demur incur inter infer occur prefer recur refer transfer
(37)以-uct结尾，读音为/)kt/的词汇：
conduct construct deduct instruct obstruct product
(38)以-ult结尾，读音为/)lt/的词汇：
consult exult insult occult midcult result
(39)以-ume结尾，读音为/j(?m/的词汇：
assume consume perfume presume subsume
(40)以-use结尾，读音为/j(?s/或/j(?z/的词汇：
accuse confuse excuse perfuse refuse suffuse transfuse
(41)以-ure结尾，读音为/ju+/的词汇：
accure impure immure insecure insure inure mature obscure per-dure procure secure（exceptions：'epicure 'manicure）
2．重音落在倒数第二个音节的字母组合：
①以-ial结尾，读音为/+l/、/i+l/或/j+l/的词汇：
/+l/：confidential decrial existential impartial inferential inffluentialinitial prejudicial sacrificial substantial
/i+l/：authorial bimestrial colloquial gressorial material mercurialministerial motorial pictorial prefatorial tectorial visitorial
/j+l/：antimonial bicentennial colonial
②以-ian结尾，读音为/+n/、/i+n/、/j+n/的词汇：
/+n/：academician arithmetician acoustician electrician Eurasian Lin-guistician musician Persian politician practician
/i+n/、/j+n/：Cantabrigian collegian Colombian historian rosarian salu-tatorian subclavian
③以-ia结尾，读音为/i+/的词汇：
国名、地名：Australia Ethiopia Indonesia Malaysia Mauritania Roma-nia
医学：abulia achromatopsia acidemia acrophobia aerophobia bilharziainsomnia
其他：academia acedia cryptomeria razzia encyclopedia
④以-ic结尾，读音为/ik/偶或包括以-ics结尾的词汇：
atomatic atmospheric autarkic autographic ballistic climatic cosmeticenteric epidemic
⑤以-ior结尾，读音为/i+/的词汇，形容词居多：
inferior junior posterior prior senior superior ulterior
⑥以-it结尾，读音为/it/的词汇：
cohabit demerit discredit discomfit decrepit deposit explicit dispiritdisinherit inspirit inherit inhabit inhibit reposit transit visit
⑦以-scence（n．）或-scent（adj）结尾：
acescence acquiescence deliquescence convalescence evanescence obso-lescence reminiscence renascence decrescent marcescent pubescent re-crudescent quiescent resipiscent suffrutescent
⑧以-ion或-sion结尾：
accusaion abolition confusion explosion decision impression persua-sion excitation suggestion invitation
3．重音落在倒数第三个音节的字母组合：
①以-fy结尾，读音为/fai/的动词：
acidify identify intensify emulsify lapidify personify qualify modifyprettify simplify transmogrify
②以-ical结尾，读音为/ik+l/的词汇：
academical chemical electrical political periodical encyclical teleologi-cal inimical theoretical technological
③以-icide结尾，读音为/isaid/的词汇：
suicide aborticide acaricide foeticide fratricide herbicide infanticideliberticide uxoricide
④以-itude结尾，读音为/itj%!d/的词汇：
attitude decrepitude infinitude lassitude latitude platitude
⑤以-ity结尾，读音为/iti/的词汇：
ability curiosity civility facility fragility opportunity personalitypossibility sensitivity simplicity speciality utility vanity whimsicality
⑥以-graph或-phy结尾，读音为/gr$f/或/fi/的词汇：
aerography bibliography biography calligraphy chirography geographylexicography photography planography telegraphy theosophy philosophy
⑦以-ology结尾，读音为/l+d*i/的词汇：
aerology bibliology bryology crytology ecology Egyptology lexicologytechnology pestology psychology testaceology teleology theology zoology
⑧以-otomy结尾，读音为/t+mi/的词汇：
neurotomy tenotomy tracheotomy trichotomy
⑨以-ular结尾，读音为/jul+/的词汇：
biangular binocular consular insular intercelluar ocular orbicularpopular particular secular regular triangular
4．词汇加了前缀后的重读位置
①重读落在第一音节的词汇，加前缀后，重读位置不变：
'dazzle—be'dazzle 'operate—co'operate
'force—en'force 'logical—il'logical
'literate—il'literate 'constant—in'constant
②重读落在第二音节的词汇，加前缀后，原重读位置不受影响，但前缀的字母组合作为一个音节可重读或次重读：
pro'duce—'repro'duce
'graduate—'post'graduate
'national—'inter'national
im'pressionism—'neo-imp'ressionism
（the only exception：'finite—'infinie）
二、简析部分
从语言学的角度来分析，英语的词重音（word stress）的位置是不固定的。英语与某些别的语言不同，例如：法语词汇的重音总是在词的末音节上；与法语相反的是捷克语，它的重音总是落在词的首音节上，而波兰语却独特一些，重音位置总是落在词汇的倒数第二个音节上，因此，这些语言的重音称为固定重音（fixed stress），而英语和俄语的重音则是自由重音（free stress）。英语本身吸收并借用了大量的外来语（loan words），以历史语言学或词源学（etymology）的观点来剖析，就不难解释为什么英语重音属于自由重音这一现象。例如：以-ion和-ic结尾的英语词汇重音往往落在倒数第二个音节上，而-ion和-ic结尾的字母组合则源于拉丁语。以-ee结尾的英语词汇重音总是落在末音节上，若追溯它的同源词（cognate），我们可以看到-ee这一后缀源于Middle English的-e，而-e又来源于Middle French的-é，若再追本溯源，乃是来自于Old French的-é。再考察以-ette后缀结尾的词汇，－ette后缀也是经历了从Old French到Middle French再到Middle English这一相似的演变过程，直至现在，仍然保留了法语的重音特征，与现代法语的词重音总是落在末音节这一规律完全吻合。
以词源学的分析作为探索基点，我们认识到英语的词重音既属于自由重音且并非无规律可循这一语言现象，从而对这一现象进行总结和分析，以求达到既能方便学习又能对所学语言深化理解的学习目的。
el-progress为啥没有动画效果
我一开始动画用的是from跟to，有着很明显的卡顿，然后我把过程拉长了之后呢，目前看起来是不卡顿的。。觉得卡顿可以调试一下background-size属性（个人建议）
因为动画我自己也不常用，比较生涩，，无用勿喷！！
设置elprogress最小尺寸
20。设置elprogress最小尺寸是20，在el-progress组件中添加stroke-width属性，设置值为20，用于设置圆形进度条的宽为20px大小。el-progress前端静态加载条，通过定时器产生随机1-10数字，需要动态的可以通过接口返回时间数据修改代码。