设计图片网站哪个好,三河建设厅公示网站,浙江网站设计公司电话,直播软件app平台大全旋转效果可以用来指示状态#xff0c;比如页面的加载状态。
可以用类spinner-border实现普通旋转的旋转器效果。 用类spinner-grow实现渐渐变大的旋转器效果。
01-最基本的示例代码
!DOCTYPE html
html
headmeta charsetUTF-8…旋转效果可以用来指示状态比如页面的加载状态。
可以用类spinner-border实现普通旋转的旋转器效果。 用类spinner-grow实现渐渐变大的旋转器效果。
01-最基本的示例代码
!DOCTYPE html
html
headmeta charsetUTF-8title旋转器颜色/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3第一种旋转器/h3
div classspinner-border/div
h3第二种旋转器/h3
div classspinner-grow/div
/body
/html运行效果如下 02-设置旋转器的颜色
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title旋转器颜色/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3旋转器颜色/h3
div classspinner-border text-primary/div
div classspinner-border text-secondary/div
div classspinner-border text-success/div
div classspinner-border text-danger/div
div classspinner-border text-warning/div
div classspinner-border text-info/div
div classspinner-border text-light/div
div classspinner-border text-dark/div
br/
br/
div classspinner-grow text-primary/div
div classspinner-grow text-secondary/div
div classspinner-grow text-success/div
div classspinner-grow text-danger/div
div classspinner-grow text-warning/div
div classspinner-grow text-info/div
div classspinner-grow text-light/div
div classspinner-grow text-dark/div
/body
/html运行效果如下
03-设置旋转器的大小
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title设置旋转器的大小/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter小的旋转器/h3
div classspinner-border spinner-border-sm/div
div classspinner-grow spinner-grow-sm ml-5/divhr/
h2 aligncenter大的旋转器/h2
div classspinner-border stylewidth: 3rem; height: 3rem;/div
div classspinner-grow ml-5 stylewidth: 3rem; height: 3rem;/div
/body
/html运行效果如下
04-设置旋转器的对齐方式
略…
05-把旋转器放在按钮中
示例代码如下
!DOCTYPE html
html
headmeta charsetUTF-8title按钮旋转器/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script
/head
body classcontainer
h3 aligncenter按钮旋转器/h3
button classbtn btn-danger typebutton disabledspan classspinner-border spinner-border-sm/span
/button
button classbtn btn-danger typebutton disabledspan classspinner-border spinner-border-sm/spanLoading...
/buttonhr/
button classbtn btn-success typebutton disabledspan classspinner-grow spinner-grow-sm/span
/button
button classbtn btn-success typebutton disabledspan classspinner-grow spinner-grow-sm/spanLoading...
/button
/body
/html运行效果如下
