mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
Progress page: remove toggle animation button (#34787)
We don't use the same approach with a button on the Placeholders page.
This commit is contained in:
parent
91295c2187
commit
9e1d81a851
@ -117,17 +117,6 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Activate animated progress bar
|
|
||||||
var btnToggleAnimatedProgress = document.getElementById('btnToggleAnimatedProgress')
|
|
||||||
if (btnToggleAnimatedProgress) {
|
|
||||||
btnToggleAnimatedProgress.addEventListener('click', function () {
|
|
||||||
btnToggleAnimatedProgress.parentNode
|
|
||||||
.querySelector('.progress-bar-striped')
|
|
||||||
.classList
|
|
||||||
.toggle('progress-bar-animated')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Insert copy to clipboard button before .highlight
|
// Insert copy to clipboard button before .highlight
|
||||||
var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
|
var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
|
||||||
document.querySelectorAll('div.highlight')
|
document.querySelectorAll('div.highlight')
|
||||||
|
@ -123,20 +123,11 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra
|
|||||||
|
|
||||||
The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
|
The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
|
||||||
|
|
||||||
<div class="bd-example">
|
{{< example >}}
|
||||||
<div class="progress">
|
|
||||||
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
|
||||||
</div>
|
|
||||||
<button type="button" class="btn btn-secondary mt-3" data-bs-toggle="button" id="btnToggleAnimatedProgress" aria-pressed="false" autocomplete="off">
|
|
||||||
Toggle animation
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
||||||
</div>
|
</div>
|
||||||
```
|
{{< /example >}}
|
||||||
|
|
||||||
## Sass
|
## Sass
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user