纯CSS loading加载进度条

  • 内容
  • 相关
我们一般在使用进度条的时候,往往都是对一组数据进行比较展示,通常是以百分比效果展示出来,可能会用到大量的js/jquery,本效果是专门使用纯的CSS来完成。 引入CSS,自己可适当的更改。
.Bar ,.Bars { position: relative; width: 200px;    /* 宽度 */ border: 1px solid #B1D632; padding: 1px; }
.Bar div,.Bars div { display: block; position: relative; background:#00F;/* 进度条背景颜色 */ color: #333333; height: 20px; /* 高度 */ line-height: 20px;  /* 必须和高度一致,文本才能垂直居中 */ }
.Bars div{ background:#090}
.Bar div span,.Bars div span { position: absolute; width: 200px; /* 宽度 */ text-align: center; font-weight: bold; }
.cent{ margin:0 auto; width:300px; overflow:hidden}
然后再是html

管理员设置 回复 可见隐藏内容

效果虽然说不上特别美观,好在实现起来很容易,希望大家喜欢。

纯CSS loading加载进度条
         本页正文内容约898个文字
         本文标签:

         版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。

         本文链接:https://suppore.cn/loading-4.html   百度已收录

发表评论

电子邮件地址不会被公开, 推荐使用QQ快速评论!

评论

28条评论
  1. avatar

      Lv.2 uBrowser 6.2.4092.1 uBrowser 6.2.4092.1 Windows Windows 回复

    可以的

    四川省成都市 移动

    1. avatar

      阿达aaa Lv.1 Chrome 66.0.3359.117 Chrome 66.0.3359.117 Windows Windows 回复

      看看

      浙江省温州市 电信

      1. avatar

        aaaa Lv.1 Chrome 65.0.3325.181 Chrome 65.0.3325.181 Windows Windows 回复

        想看一下。。

        四川省成都市 电信

        1. avatar

          小熙一生平安 Lv.1 Chrome 59.0.3071.115 Chrome 59.0.3071.115 Windows Windows 回复

          看看

          江西省赣州市 联通

          1. avatar

            看看 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

            看看

            福建省 移动

            1. avatar

              墮落の天使 Lv.1 QQbrowser QQbrowser Android 7.0 Android 7.0 回复

              看一眼

              中国 移动

              1. avatar

                花晨月夕 Lv.1 Chrome 65.0.3325.162 Chrome 65.0.3325.162 Windows Windows 回复

                梵蒂冈傻瓜蛋撒个

                江苏省宿迁市 电信

                1. avatar

                  风雨 Lv.3 Chrome 57.0.2987.108 Chrome 57.0.2987.108 Android 8.0.0 Android 8.0.0 回复

                  看看

                  黑龙江省牡丹江市 联通

                  00:00 / 00:00
                  顺序播放