web特效-折叠隐藏文字&炫酷复选框&波动加载条&音乐波动加载条&流彩边框&环形指示器

本文链接：https://blog.youkuaiyun.com/Aqours/article/details/108064990

本文介绍了一系列炫酷的网页特效实现，包括折叠隐藏文字、炫酷复选框、波动加载条等，通过HTML、CSS和JavaScript的巧妙运用，提升网页互动性和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web特效

折叠隐藏文字

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>被折叠隐藏的字符</title>
  <style>
    *{
      margin: 0px;
      padding: 0px;
    }
    .char1{
      background-color: red;
      margin: auto;
      border-radius: 65px;
      padding-left: 50px;
      padding-right: 50px;
    }
    .my-span{
      color: white;
      font-size: 100px;
      display: inline-block; /*变为行内块元素*/
      /*添加样式数据在变化时的过渡效果*/
      transition: 1s;
    }
    /*隐藏字母的样式*/
    .my-hide{
      opacity: 0;
      width: 0px;
    }
    /*当鼠标悬浮在div上时，显示隐藏的span标签  >是只选择子代元素，不会影响孙代及以后的元素*/
    .char1:hover>span.my-hide{
      opacity: 1;
      width:90px;
    }
    .my-div-top{
      width: 100%;
      height: 50vh;
      background-color: lightblue;/*设置为弹性盒模型 要求是必须有高度*/
      display: flex;
    }
    .my-div-bottom{
      width: 100%;
      height: 50vh;
      background-color: lightgreen;
      display: flex;
    }
    .my-fix-width{
      width: 640px;
      text-align: center;
    }
  </style>
</head>
<body>
<div class="my-div-top">
  <div class="char1">
    <span class="my-span">碧</span>
    <span class="my-span my-hide">蓝</span>
    <span class="my-span my-hide">航</span>
    <span class="my-span">线</span>
  </div>
  <div class="char1">
    <span class="my-span">高</span>
    <span class="my-span my-hide">校</span>
    <span class="my-span my-hide">舰</span>
    <span class="my-span">队</span>
  </div>
</div>
<div class="my-div-bottom">
  <div class="char1 my-fix-width">
    <span class="my-span">公</span>
    <span class="my-span my-hide">主</span>
    <span class="my-span my-hide">链</span>
    <span class="my-span">接</span>
  </div>
</div>

</body>
</html>

炫酷复选框

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>炫酷的复选按钮</title>
  <style>
    *{
      padding: 0px;
      margin: 0px;
    }
    body{
      width: 100%;
      height: 100vh;
      background-color: lightblue;
      display: flex;/*要想使设置为auto的标签居中，需要设置为flex*/
    }
    .my-checkbox{
      display: block;/*input标签是内联元素，需要变为块元素后，才能设置高度和宽度*/
      width: 200px;
      height: 80px;
      margin: auto;
      -webkit-appearance: none;
      -moz-appearance: none;
      outline: none;

      border: 5px solid #888888;
      border-radius: 40px;
      background: linear-gradient(to bottom,#5B5B5B,#F0F0F0F0);
      box-shadow: 8px 6px 20px #888888,inset 5px -5px 30px #333333;/*上阴影 下阴影*/
      position: relative;/*设置 相对定位并不会影响现在的位置*/
      transition: 0.5s;
    }
    /*滑动按钮大的灰色部分*/
    .my-checkbox::before{
      display: block;
      content: "";
      width: 120px;
      height: 60px;
      background: linear-gradient(to top,#000,#6b6b6b);
      border: 5px solid #555555;
      border-radius: 35px;
      position: absolute;
      left: 0px;
      top: 0px;
      transition: 0.5s;
    }
    /*滑动按钮小的亮光部分*/
    .my-checkbox::after{
      display: block;
      content: "";
      width: 10px;
      height: 10px;
      background: darkgray;
      border-radius: 50%;
      transform: translate(0,-50%);/*负号向上调整*/
      position: absolute;
      left: 90px;
      top: 50%;
      transition: 0.5s;/*过渡*/
      box-shadow: 0 0 15px deepskyblue;/*泛光 不需要偏移量*/
    }
    /*复选框选中以后的样式*/
    .my-checkbox:checked::before{
      left:60px;
    }
    /*复选框选中以后小灰点的样式*/
    .my-checkbox:checked::after{
      left:150px;
      background-color: deepskyblue;
      box-shadow: 0 0 0px deepskyblue;/*泛光 不需要偏移量*/
    }
    /*复选框选中以后大背景的样式*/
    .my-checkbox:checked{
      border: 5px solid deepskyblue;
      border-radius: 40px;
      background: linear-gradient(to bottom,#00aeae,#a6ffff);
      box-shadow: 8px 6px 20px #888888,inset 5px -5px 30px #007979;/*上阴影 下阴影*/
    }
  </style>
</head>
<body>
<input type="checkbox" class="my-checkbox"/>
</body>
</html>

波动加载条

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      padding: 0px;
      margin: 0px;
    }
    .top{
      display: flex;/*弹性盒模型*/
      height: 50vh;
      background-color: darkgreen;
    }
    .bottom{
      display: flex;/*弹性盒模型*/
      height: 50vh;
      background-color: deepskyblue;
    }
    /*实现在弹性盒子中上下居中*/
    .loading{
      margin: auto;
    }

    /*加载条*/
    .loading>span{
      display: inline-block;/*将span行内元素变为行内块元素*/
      width: 20px;
      height: 100px;
      background-color: white;
      border-radius: 10px;
      margin-left: 5px;
      margin-right: 5px;
      animation: spanHeight 1s infinite ;
      /*父元素span设置为相对定位，然后span的子元素div设置为绝对定位*/
      position: relative;/*为了使文字底边对齐*/
    }
    /*添加伪元素，放置DIV抖动*/
    .loading::after{
      content: "";/*空字符串代表是个*空伪元素*/
      height: 110px;
      width: 0px;
      background-color: red;
      display: inline-block;
    }
    /*让span标签高度发生变化的关键帧动画*/
    @keyframes spanHeight {
      0%{
        height: 20px;
      }
      50%{
        height: 100px;
      }
      100%{
        height: 20px;
      }
    }
    .loading>span:nth-of-type(2){
      /*第二个span标签*/
      animation-delay: 0.1s;
    }
    .loading>span:nth-of-type(3){
      animation-delay: 0.2s;
    }
    .loading>span:nth-of-type(4){
      animation-delay: 0.3s;
    }
    .loading>span:nth-of-type(5){
      animation-delay: 0.4s;
    }
    .loading>span:nth-of-type(6){
      animation-delay: 0.5s;
    }
    .loading>span:nth-of-type(7){
      animation-delay: 0.6s;
    }
    .loading>span:nth-of-type(8){
      animation-delay: 0.7s;
    }
    .loading>span:nth-of-type(9){
      animation-delay: 0.8s;
    }
    .loading>span:nth-of-type(10){
      animation-delay: 0.9s;
    }
    /*第二个波形 中线对齐*/
    .load2>span{
      vertical-align: middle;
    }
    /*上边线对齐*/
    .load3>span{
      vertical-align: top;
    }
    .load4>span{
      vertical-align: top;
      background-color: transparent;/*保留父元素的背景色*/
    }
    /*让文字左右居中以及底边对齐*/
    .loading>span>div{
      text-align: center;
      font-size: 20px;
      position: absolute;/*子元素设置为绝对定位*/
      bottom: 0px;
      width: 100%;
    }
    .load4>span>div{
      font-size: 40px;
    }
  </style>
</head>
<body>
<div class="top">
  <div class="loading load1">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="loading load2">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<div class="bottom">
  <div class="loading load3">
    <span><div>L</div></span>
    <span><div>o</div></span>
    <span><div>a</div></span>
    <span><div>d</div></span>
    <span><div>i</div></span>
    <span><div>n</div></span>
    <span><div>g</div></span>
    <span><div>.</div></span>
    <span><div>.</div></span>
    <span><div>.</div></span>
  </div>
  <div class="loading load4">
    <span><div>L</div></span>
    <span><div>o</div></span>
    <span><div>a</div></span>
    <span><div>d</div></span>
    <span><div>i</div></span>
    <span><div>n</div></span>
    <span><div>g</div></span>
    <span><div>.</div></span>
    <span><div>.</div></span>
    <span><div>.</div></span>
  </div>
</div>
</body>
</html>

音乐波动加载条

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      padding: 0px;
      margin: 0px;
    }
    .top{
      display: flex;/*弹性盒模型*/
      height: 50vh;
      background-color: darkgreen;
    }
    .bottom{
      display: flex;/*弹性盒模型*/
      height: 50vh;
      background-color: deepskyblue;
    }
    /*实现在弹性盒子中上下居中*/
    .loading{
      margin: auto;
    }

    /*加载条*/
    .loading>span{
      display: inline-block;/*将span行内元素变为行内块元素*/
      width: 20px;
      height: 100px;
      background-color: white;
      border-radius: 10px;
      margin-left: 5px;
      margin-right: 5px;
      animation: spanHeight 1s infinite ;
      /*父元素span设置为相对定位，然后span的子元素div设置为绝对定位*/
      position: relative;/*为了使文字底边对齐*/
    }
    /*添加伪元素，放置DIV抖动*/
    .loading::after{
      content: "";/*空字符串代表是个*空伪元素*/
      height: 210px;
      width: 0px;
      background-color: red;
      display: inline-block;
    }
    #btn{
      height: 50px;
      padding-left: 20px;
      padding-right: 20px;

    }
  </style>
  <script src="./js/jquery-3.1.0.min.js"></script>
  <script type="text/javascript">
    var analyser = null;
    var inited = false;
    $(function () {
      $('#btn').click(function () {
        //先判断当前浏览器是否支持音频处理
        if(!(window.AudioContext || window.webkitAudioContext)){
          alert("当前浏览器不支持音频处理");
          return;
        }
        /*初始化只能一次*/
        if(inited == false){
          inited = true;
          //创建音频上下文
          var context = new window.AudioContext;
          if(context == null){
            context = new window.webkitAudioContext;
          }
          //创建音频源
          var source = context.createMediaElementSource($('#player')[0]);
          //创建媒体解析器
          analyser = context.createAnalyser();
          //采样率的设置，数值有要求 必须是2的幂次方
          analyser.fftSize = 32;
          //关联起创建好的对象
          source.connect(analyser);
          analyser.connect(context.destination);
        }

        //启动定时器
        setInterval("draw()",80);
      });
    });
    //定时器函数 用于定时刷新立柱的高度
    function draw() {
      var arr = new Uint8Array(32);/*32个立柱*/
      analyser.getByteTimeDomainData(arr);
      for (var i = 0; i < arr.length; i++) {
        console.log(i + "=" + arr[i]);
        $('.loading>span').eq(i).height(100*(arr[i]/128.0));
      }
    }
  </script>
</head>
<body>
<div class="top">
  <audio src="./audio/op.mp3" controls id="player"></audio>
  <button id="btn">波形跟踪</button>
</div>
<div class="bottom">
  <div class="loading load1">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
</body>
</html>

流彩边框

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>流彩边框</title>
</head>
<style>
  *{
    padding: 0px;
    margin: 0px;
  }
  body{
    height: 100vh;
    background-color: black;
    display: flex;
  }
  /*按钮div的样式*/
  .my-btn{
    font-size: 50px;
    padding: 5px 50px;
    background: linear-gradient(45deg,lightgreen,lightblue,lightgoldenrodyellow);/*线性渐变*/
    margin: auto;
    position: relative;/*父元素相对定位*/
    overflow: hidden;
  }
  /*top========================*/
  .my-top{
    width: 100%;
    height: 3px;
    position: absolute;/*子元素绝对定位*/
    top: 0px;
    left: -100%;
    background: linear-gradient(to right,transparent,lightcoral,deepskyblue,blue,transparent);
    animation: animateBorderTop 2s infinite linear;
  }
  @keyframes animateBorderTop {
    from{
      left: -100%;
    }
    to{
      left: 300%;
    }
  }
  /*right========================*/
  .my-right{
    width: 3px;
    height: 100%;
    position: absolute;/*子元素绝对定位*/
    top: -100%;
    right: 0px;
    background: linear-gradient(to bottom,transparent,lightcoral,deepskyblue,blue,transparent);
    animation: animateBorderRight 2s infinite linear;
    animation-delay: 0.5s;
  }
  @keyframes animateBorderRight {
    from{
      top: -100%;
    }
    to{
      top: 300%;
    }
  }
  /*bottom========================*/
  .my-bottom{
    width: 100%;
    height: 3px;
    position: absolute;/*子元素绝对定位*/
    bottom: 0px;
    left: 100%;
    background: linear-gradient(to left,transparent,lightcoral,deepskyblue,blue,transparent);
    animation: animateBorderBottom 2s infinite linear;
    animation-delay: calc(0.5s * 2 );
  }
  @keyframes animateBorderBottom {
    from{
      left: 100%;
    }
    to{
      left: -300%;
    }
  }
  /*left========================*/
  .my-left{
    width: 3px;
    height: 100%;
    position: absolute;/*子元素绝对定位*/
    top: 100%;
    left: 0px;
    background: linear-gradient(to top,transparent,lightcoral,deepskyblue,blue,transparent);
    animation: animateBorderLeft 2s infinite linear;
    animation-delay: calc(0.5s * 3);
  }
  @keyframes animateBorderLeft {
    from{
      top: 100%;
    }
    to{
      top: -300%;
    }
  }
  /*去掉按钮的流动动画*/
  .my-hover>div{
    animation: none;
  }
  /*鼠标悬浮的时候给四个边添加动画，动画播放一次*/
  .my-hover:hover>.my-top{
     animation: animateBorderTop 0.2s 1 linear;
     animation-delay: calc(0.1s * 0);
  }
  .my-hover:hover>.my-right{
    animation: animateBorderRight 0.2s 1 linear;
    animation-delay: calc(0.1s * 1);
  }
  .my-hover:hover>.my-bottom{
    animation: animateBorderBottom 0.2s 1 linear;
    animation-delay: calc(0.1s * 2);
  }
  .my-hover:hover>.my-left{
    animation: animateBorderLeft 0.2s 1 linear;
    animation-delay: calc(0.1s * 3);
  }
</style>
<body>
<div class="my-btn">
  登录
  <div class="my-top"></div>
  <div class="my-right"></div>
  <div class="my-bottom"></div>
  <div class="my-left"></div>
</div>
<div class="my-btn my-hover">
  注册
  <div class="my-top"></div>
  <div class="my-right"></div>
  <div class="my-bottom"></div>
  <div class="my-left"></div>
</div>
</body>
</html>

环形指示器

基本属性操作

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>环形指示器实例</title>
  <style>
    body>div{
      display: inline-block;
    }
  </style>
  <script src="../js/jquery-3.1.0.min.js"></script>
  <script src="../js/radialIndicator.min.js"></script>
  <script type="text/javascript">
    var app3 = null;
    var timer = null;
    $(function () {
      radialIndicator("#app",{
        initValue:50,//当前数值
        radius:100,
        barWidth:20,
        barColor:"#53ccff",
        roundCorner: true,
        minValue:0,
        maxValue:60,//会根据当前数值在此区间的比列反应到指示器上
        displayNumber: true,
        percentage:true,//显示百分比
      });
      radialIndicator("#app2",{
        initValue:50000,//当前数值
        radius:100,
        barWidth:20,
        barColor:"#53ccff",
        roundCorner: true,
        minValue:0,
        maxValue:1000000,//会根据当前数值在此区间的比列反应到指示器上
        displayNumber: true,
        percentage:false,//显示百分比
        format:"$ ###,###,###元"
      });
      app3 = radialIndicator("#app3",{
        initValue:0,//当前数值
        radius:100,
        barWidth:20,
        //此处的颜色不能使用关键字
        barColor:{
          0:"#f00",
          50:"#ff0",
          100:"#0f0"
        },
        roundCorner: true,
        minValue:0,
        maxValue:100,//会根据当前数值在此区间的比列反应到指示器上
        displayNumber: true,
        percentage:false,//显示百分比
      });
      timer = setInterval("changeApp3()",100);
    });
    var app3Value = 0;
    function changeApp3() {
      app3Value+=5;
      //生硬的颜色过渡app3.value(app3Value);
      app3.animate(app3Value);//平滑的颜色过渡
      if(app3Value >= 100){
        clearInterval(timer);
      }
    }

  </script>
</head>
<body>
<div id="app"></div>
<div id="app2"></div>
<div id="app3"></div>
<div id="app4"></div>
</body>
</html>

CD时间的环形指示器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CD冷却时间</title>
  <style>
    *{
      padding: 0px;
      margin: 0px;
    }
    body{
      display: flex;
      height: 100vh;/*显示视图的最大高度*/
    }
    #app{
      margin: auto;
    }
  </style>
  <script src="../js/jquery-3.1.0.min.js"></script>
  <script src="../js/radialIndicator.min.js"></script>
  <script type="text/javascript">
    var app = null;
    var timer = null;
    $(function () {
      app = radialIndicator("#app",{
        initValue:50,
        radius:0,
        barWidth:400,
        barColor:{
          0:"#ff0000",
          100:"#0f0"
        },
        fontColor:"#000",
        fontSize:100,
        roundCorner: false,
        minValue:0,
        maxValue:100,
        format:function () {
          return 100 - leftTime;
        }
      });
      timer = setInterval("CDTime()",50);
    });
    var leftTime = 0;
    function CDTime() {
      leftTime += 1;
      app.value(leftTime);
      if(leftTime >= 100){
        clearInterval(timer);
      }
    }

  </script>
</head>
<body>
<div id="app"></div>
</body>
</html>

时钟环形指示器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>时钟</title>
  <style>
    *{
      padding: 0px;
      margin: 0px;
    }
    body{
      display: flex;
      height: 100vh;/*显示视图的最大高度*/
    }
    #app{
      margin: auto;
    }
  </style>
  <script src="../js/jquery-3.1.0.min.js"></script>
  <script src="../js/radialIndicator.min.js"></script>
  <script type="text/javascript">
    var app = null;
    var timer = null;
    $(function () {
      app = radialIndicator("#app",{
        initValue:50,
        radius:150,
        barWidth:40,
        barColor:{
          0:"#ff0000",
          100:"#0f0"
        },
        fontColor:"#000",
        fontSize:50,
        roundCorner: true,
        minValue:0,
        maxValue:60,
        format:function () {
          var now = new Date();
          var str = "";
          if(now.getHours() >= 10){
            str += now.getHours();
          }else{
            str += ("0"+now.getHours());
          }
          str += ":";
          if(now.getMinutes() >= 10){
            str += now.getMinutes();
          }else{
            str += ("0"+now.getMinutes());
          }
          str += ":";
          if(now.getSeconds() >= 10){
            str += now.getSeconds();
          }else{
            str += ("0"+now.getSeconds());
          }
          return str;
        }
      });
      timer = setInterval("Time()",1000);
    });
    function Time() {
      var now = new Date();
      app.value(now.getSeconds());
    }

  </script>
</head>
<body>
<div id="app"></div>
</body>
</html>

使用bootstrap和jquery-easing来设计自定义进度条

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义进度条</title>
  <link rel="stylesheet" href="../css/bootstrap.css"/>
  <style>
    .my-progressbar {
      width: 100%;
      height: 15px;
      background: transparent;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border: 1px solid darkgray;
      margin: 10px 0 15px;
      padding: 3px;
      /*相对定位，相对原来的位置定位*/
      position: relative;
    }

    /*进度条内部样式*/
    .my-progressbar .progress-value {
      height: 100%;
      width: 0%;
      background: url("../img/progress-bar.jpg") repeat-x;
      background-position: 0% 0%;
      /*linear 让其匀速   infinite是无限次执行*/
      animation: backgroundRolling 6s linear infinite;
      -webkit-animation: backgroundRolling 6s linear infinite;
      -moz-animation: backgroundRolling 6s linear infinite;
    }
    /*用户显示百分比的span标签*/
    .my-progressbar .progress-percent {
      background: url("../img/progressbar-percent.png") 0 0 no-repeat;
      width: 34px;
      height: 35px;
      display: none;
      color: white;
      font-size: 10px;
      /*根据设置为相对定位的父元素的位置来定位*/
      position: absolute;
      top: -34px;
      left: 0%;
      margin-left: -17px;
      text-align: center;
      padding-top: 2px;
      padding-right:4px ;
    }

    @keyframes backgroundRolling {
      from {
        background-position: 0% 0%;
      }
      to {
        background-position: 100% 0%;
      }
    }

    @-webkit-keyframes backgroundRolling {
      from {
        background-position: 0% 0%;
      }
      to {
        background-position: 100% 0%;
      }
    }

    @-moz-keyframes backgroundRolling {
      from {
        background-position: 0% 0%;
      }
      to {
        background-position: 100% 0%;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <h1>项目进度</h1>
  <div>
    <p>UI设计</p>
    <div class="my-progressbar" data-percent="65">
      <div class="progress-value"></div>
      <span class="progress-percent"></span>
    </div>
  </div>
</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/jquery-easing.js"></script>
<script type="text/javascript">
  // 文档加载好后 进行进度条的动画显示
  $(function () {
    $(window).bind("scroll load resize",function () {
      animateProgressBars();
    })
  });

  // 进度条的动画显示
  function animateProgressBars() {
    //麻烦的方法
      // var progress = $('.my-progressbar');
      // for (var i = 0;i<progress.length;i++){
      //   var one = progress.eq(i);//eq取出索引为i的对象
      //   if(!one.hasClass("animating")){
      //     //正式执行开始动画的函数
      //   }
      // }
    // 得到window的高度  和 下拉条的高度
    var window_h = $(window).height();
    var scrollingTop = $(window).scrollTop();
    //jquery简单的方法
    $('.my-progressbar').each(function () {
      var one = $(this);
      //进度条距离最上方的高度
      var bar_y = one.offset().top;
      if(!one.hasClass("animating") && bar_y <(window_h + scrollingTop)){
        barStartAnimateReal(one);
      }
    })
  }

  // 进度条真正动起来的函数
  function barStartAnimateReal(bar) {
    // 内部条元素
    var bar_progress = bar.find(".progress-value");
    var bar_percent = bar.find(".progress-percent");
    bar.addClass("animating");
    bar_percent.fadeIn(200);
    // jquery方式
      //var percent = parseInt(bar.attr("data-percent"));
    // bootstrap方式 使用data函数的方式获取数据属性
    var percent = parseInt(bar.data("percent"));
    bar_progress.animate({
      width:percent + "%",
    },{
      duration:1000,
      easing:'easeOutElastic',
      step:function (now,fx) {
        bar_percent.text(now + "%").css("left", parseInt(now) + "%");
      }
    })
  }
</script>
</body>
</html>