<!--html代码-->

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title></title>

</head>

<body>

    <div class="progressBox">

        <div class="progress" style="display:block;">

            <div class="progress-bar" style="width:40%;">

                <span id="bbb">40%</span>

            </div>

        </div>

    </div>

</body>

</html>
 /*css代码*/

.progressBox {

    width:80%;

    height:100%;

    overflow: visible;

}

.progress {

    height: 30px;

    padding: 6px;

    display:none;

    margin-top:20px;

    background: #809495;

    position: relative;

    overflow: visible;

    border-radius: 30px;

}

.progress .progress-bar{

    height:30px;

    z-index: 2;

    position: relative;

    background:#f0ad4e;

    border-radius:30px;

    animation: animate-positive 4s;

}

.progress .progress-bar span {

    position: absolute;

    top: -15px;

    right:-40px;

    color: #fff;

    width: 60px;

    height: 60px;

    display: block;

    font-size: 17px;

    font-weight: bold;

    background: #f0ad4e;

    line-height: 60px;

    text-align: center;

    border-radius: 100%;

}

@-webkit-keyframes animate-positive {

    0% { width: 0%;}

}

@keyframes animate-positive {

    0% { width:0%; }

}

纯css进度条效果的更多相关文章

  1. 纯css进度条,各种兼容

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD&g ...

  2. 纯css实现进度条效果

    去年7月份做一个公司商城的微信页面(微信用的chrome内核)需要写一个提示返现进度的进度条效果. 一个完整的进度条效果其实可以拆分一下: 一段背景: 一小段的静态的斜纹进度条: 斜纹进度条用线性渐变 ...

  3. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

  4. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  5. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  6. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  7. css 进度条

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  9. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

随机推荐

  1. java中异常处理

    看到一篇异常处理的好文章: Java异常处理机制主要依赖于try,catch,finally,throw,throws五个关键字. try 关键字后紧跟一个花括号括起来的代码块,简称try块.同理:下 ...

  2. 源码阅读经验谈-slim,darknet,labelimg,caffe(1)

    本文首先谈自己的源码阅读体验,然后给几个案例解读,选的例子都是比较简单.重在说明我琢磨的点线面源码阅读方法.我不是专业架构师,是从一个深度学习算法工程师的角度来谈的,不专业的地方请大家轻拍. 经常看别 ...

  3. 去“BAT”这样面试，拿到offer的几率是80%（转）

    一.概述面试,难还是不难?取决于面试者的底蕴(气场+技能).心态和认知及沟通技巧.面试其实可以理解为一场聊天和谈判,在这过程中有心理.思想上的碰撞和博弈.其实你只需要搞清楚一个逻辑:“面试官为什么会这 ...

  4. laravel PHPExcel 使用小结

    最近需求要用到PHPExcel,laravel框架中有相应的组件https://github.com/Maatwebsite/Laravel-Excel,我用的是2.1的(3.0文档不详细而且坑似乎也 ...

  5. JAVA远程调试

    1.远程端启动必须添加jvm参数 -Xdebug -Xrunjdwp:transport=dt_socket,suspend=n,server=y,address=${debug_port} 其中de ...

  6. OpenStack安装-MySQL,Rabbitmq,memcache.

    基于前一篇的基本环境,现在我们开始安装MySQL. 在node1上面安装MySQL: [root@linux-node1 ~]# yum install mariadb mariadb-server ...

  7. mybatis 根据参数映射对应模型

    ORM 框架的优势在于能让我们利用面向对象的思维去操作数据库, hibernate 作为重量级的 ORM 框架对面向对象的支持很强大.作为半自动化的 mybatis ,对面向对象的支持也是很完备的.这 ...

  8. gcc 与 g++的区别

    原文: http://www.cnblogs.com/wb118115/p/5969775.html ------------------------------------------------- ...

  9. 如何强制停止http请求

    http请求很多时候会受到网络阻塞.重连等原因导致响应很慢,如果此时做了一些操作,但过几秒后又响应了之前的请求,就会造成很多问题,此时我们可以使用abort()方法强制停止http请求: let aj ...

  10. vue去掉地址栏#（带来的后果）

    按以下修改后,带来的后果:打包后部分图片访问不到,首页没加载router-view内容 router 的index中配置模式设置为history export default new Router({ ...