progress bar width set via scale instead of width for perf
parent
5e49cbdcf7
commit
df61f9e1fa
|
@ -567,10 +567,12 @@ $controlsArrowAngleActive: 36deg;
|
||||||
.reveal .progress span {
|
.reveal .progress span {
|
||||||
display: block;
|
display: block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 0px;
|
width: 100%;
|
||||||
|
|
||||||
background-color: currentColor;
|
background-color: currentColor;
|
||||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||||
|
transform-origin: 0 0;
|
||||||
|
transform: scaleX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
|
|
|
@ -299,9 +299,6 @@
|
||||||
background: rgba(0,0,0,0.2);
|
background: rgba(0,0,0,0.2);
|
||||||
color: $linkColor;
|
color: $linkColor;
|
||||||
}
|
}
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -281,9 +281,6 @@
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: #8b743d; }
|
color: #8b743d; }
|
||||||
|
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -277,9 +277,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: #42affa; }
|
color: #42affa; }
|
||||||
|
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -280,9 +280,6 @@
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: #a23; }
|
color: #a23; }
|
||||||
|
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -283,9 +283,6 @@
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: #13DAEC; }
|
color: #13DAEC; }
|
||||||
|
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -281,9 +281,6 @@ html * {
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: #268bd2; }
|
color: #268bd2; }
|
||||||
|
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -275,9 +275,6 @@
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: #e7ad52; }
|
color: #e7ad52; }
|
||||||
|
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -277,9 +277,6 @@
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: #51483D; }
|
color: #51483D; }
|
||||||
|
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -280,9 +280,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: #00008B; }
|
color: #00008B; }
|
||||||
|
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -284,9 +284,6 @@
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: #3b759e; }
|
color: #3b759e; }
|
||||||
|
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -281,9 +281,6 @@ html * {
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: #268bd2; }
|
color: #268bd2; }
|
||||||
|
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -277,9 +277,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
color: #2a76dd; }
|
color: #2a76dd; }
|
||||||
|
|
||||||
.reveal .progress span {
|
|
||||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT BACKGROUND
|
* PRINT BACKGROUND
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -55,7 +55,7 @@ export default class Progress {
|
||||||
// Update progress if enabled
|
// Update progress if enabled
|
||||||
if( this.Reveal.getConfig().progress && this.bar ) {
|
if( this.Reveal.getConfig().progress && this.bar ) {
|
||||||
|
|
||||||
this.bar.style.width = this.Reveal.getProgress() * this.getMaxWidth() + 'px';
|
this.bar.style.transform = 'scaleX('+ this.Reveal.getProgress() +')';
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue