纯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快速评论!

评论

26条评论
  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 回复

              看看

              黑龙江省牡丹江市 联通

              1. avatar

                利利 Lv.1 Firefox 56.0 Firefox 56.0 Windows 7 x64 Edition Windows 7 x64 Edition 回复

                看看

                上海市 电信

                1. avatar

                  Lv.2 Chrome 64.0.3282.140 Chrome 64.0.3282.140 Windows Windows 回复

                  [code]签到成功!签到时间: 上午10时56分8秒,签到运到,生活乐逍遥![/code]我得罪你了?禁止alen?

                  广东省江门市 电信

                  00:00 / 00:00
                  顺序播放