css 3で簡単に進捗バーを実現します.

css 3は不思議なもので、先ほどは手が痒くなりました.簡単な進捗書を書きました.jsはいらないです.
直接にdivをセットして、中のdivをセットしてアニメーションを使ってもいいです.
html数:

<div class="loading">
        <div class="progress">

        </div>
    </div>

loading css:

.loading{
            width: 300px;
            height: 15px;
            border-radius: 10px;
            border: 1px solid blue;
            box-shadow: 2px 2px 5px 1px blue;
        }

progress css:

.progress{
            width:0%;//         0
            height: 100%;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,blue), to(#7BC3FF));
            border-radius: 10px;
        }

アニメはアニメとトランスジェンシーで全部できます.
アニメーションを例にとって:

@-webkit-keyframes aaa{
            0%{ width: 0%; }
            30%{width:30%; }
            60%{width:60%;}
            100%{width:80%; }
        }
        .progress{
            width:0%;
            height: 100%;
          
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,blue), to(#7BC3FF));
            border-radius: 10px;
           
            -webkit-animation:aaa 2s linear;
        }

これは九牛の一毛にすぎません.できないことはないです.予想外です.こんにちは.