CSS3 を使用して円形スクロールプログレスバーアニメーションを作成する例

テーマ

今日は、CSS3 を使用して円形スクロールプログレスバーアニメーションを作成する方法を説明します。簡単に習得できます。それで、それは正確には何ですか?心配しないでください。以前、CSS でプログレスバー効果を実現する方法についてのブログ「CSS でプログレスバーと順序プログレスバーを実現する」を共有しましたが、そのブログでは効果のみが生成され、アニメーション効果はありませんでした。当時は期末試験の復習中だったので、アニメーションを作成する時間コストを節約しました。さあ、今日も一緒にいろんな効果を実感してみましょう！

コンテンツ

まずはレンダリングを見て、学習への興味を高めましょう。

さて、この図に沿って上から下まで説明していきます。1番目と2番目の効果はブログ「CSSプログレスバーとオーダープログレスバー」で紹介しているので、ここではアニメーションに焦点を当てます。円形効果がポイントなので、詳しく説明します。

最初の効果:

HTML構造:

<div id="進捗">
      <span></span>
</div>

CSS スタイル:

＃進捗{
            幅: 50%;
            高さ: 30px;
            境界線:1px実線 #ccc;
            境界線の半径: 15px;
            マージン: 50px 0 0 100px;
            オーバーフロー: 非表示;
            ボックスシャドウ: 0 0 5px 0px #ddd インセット;
        }
        #進捗状況スパン{
            表示: インラインブロック;
            幅: 100%;
            高さ: 100%;
            background: #2989d8; /* 古いブラウザ */
            背景: -moz-linear-gradient(45度, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */
            背景: -webkit-gradient(linear, 左下, 右上, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome、Safari4+ */
            背景: -webkit-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Chrome 10+、Safari 5.1+ */
            背景: -o-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Opera 11.10+ */
            背景: -ms-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* IE10+ */
            背景: linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* W3C */
            フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* 水平グラデーションの IE6-9 フォールバック */
            背景サイズ: 60px 30px;
            テキスト配置: 中央;
            色:#fff;
            -webkit-animation:load 3s イーズイン;
        }
        @-webkit-keyframes ロード{
            0%{
                幅: 0%;
            }
            100%{
                幅:100%;
            }
        }

こうしたプログレスバーアニメーションは、実際には最も簡単に実装できることがわかります。アニメーションでは、特定の進行状況パーセンテージに応じて、デフォルトの幅パーセンテージと幅パーセンテージを 100% に設定するだけです。たとえば、70% のプログレスバーアニメーション効果を実現したい場合は、次の 2 か所を変更するだけで済みます。

#進捗状況スパン{
    幅: 70%;
}
@-webkit-keyframes ロード{
      0%{
        幅: 0%;
      }
    100%{
        幅:70%;
      }
}

2番目の効果:

HTML構造:

<div id="プログレスバー">
      <!-- 進捗状況バー -->
      <div>
        <span></span>
      </div>
      <!-- 5 つの円 -->
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
 </div>

CSS スタイル:

#プログレスバー{
            幅: 80%;
            高さ: 50px;
            位置: 相対的;
            マージン: 50px 0 0 100px;
        }
        #プログレスバー div{
            幅: 100%;
            高さ: 10px;
            位置: 絶対;
            上位:50%;
            左: 0;
            上マージン:-20px;
            背景: #ccc;
        }
        #progressBar div span {
            位置: 絶対;
            表示: インラインブロック;
            背景: 緑;
            高さ: 10px;
            幅: 100%;
            -webkit-animation:bgLoad 5.5秒リニア;
        }
        @-webkit-keyframes bgLoad{
            0%{
                幅: 0%;
            }
            18.18%、27.27%{
                幅:25%;
            }
            45.45%、54.54%{
                幅: 50%;
            }
            72.72%、81.81%{
                幅: 75%;
            }
            100%{
                幅:100%;
            }
        }
        #プログレスバー>span{
            位置: 絶対;
            トップ:0;
            上マージン: -10px;
            幅: 40px;
            高さ: 40px;
            境界線の半径: 50%;
            背景: #ccc;
            左マージン: -20px;
            色:#fff;
        }
        @-webkit-keyframes サークルロード_1{
            0%,66.66%{
                背景: #ccc;
            }
            100%{
                背景：緑;
            }
        }
        @-webkit-keyframes サークルロード_2{
            0%,83.34%{
                背景: #ccc;
            }
            100%{
                背景：緑;
            }
        }
        @-webkit-keyframes サークルロード_3{
            0%,88.88%{
                背景: #ccc;
            }
            100%{
                背景：緑;
            }
        }
        @-webkit-keyframes サークルロード_4{
            0%,91.67%{
                背景: #ccc;
            }
            100%{
                背景：緑;
            }
        }
        #プログレスバー span:nth-child(2){
            左: 0%;背景:緑;
        }
        #プログレスバー span:nth-child(3){
            左: 25%;背景:緑;
            -webkit-animation:circleLoad_1 1.5秒のイーズイン;
        }
        #プログレスバー span:nth-child(4){
            左: 50%;背景:緑;
            -webkit-animation:circleLoad_2 3秒のイーズイン;
        }
        #プログレスバー span:nth-child(5){
            左: 75%;背景:緑;
            -webkit-animation:circleLoad_3 4.5秒のイーズイン;
        }
        #プログレスバー span:nth-child(6){
            左: 100%;背景:緑;
            -webkit-animation:circleLoad_4 6秒のイーズイン;
        }

ご覧のとおり、アニメーション自体は実は非常にシンプルで理解しやすいものです。主にアニメーションの継続時間の計算を行います。このアニメーション効果は 1 回しか実行されないため、アニメーションの遅延時間を使用して、各アニメーションが指定された時点で開始されるようにすることができます。ただし、ループまたは複数のアニメーション効果の場合、遅延は柔軟ではないため、ここでは継続時間を使用してアニメーションの実行時間を制御します。

この注文進捗状況バーでは、セクションを移動するのに 1 秒かかり、各ドットで 0.5 秒間停止するように設定しました。この 0.5 秒は、対応するドットのアニメーションの継続時間です。しかし、これは単一のアニメーションであることを再度強調する必要があります。ループアニメーションを実装する場合は、調整が必要です。すべてのアニメーションの継続時間は同じである必要があります。そうでないと、ループが乱雑になります。時間の変更は、アニメーションキーフレームの変更にも影響します。以下は、最初のセグメントと 2 番目の円のアニメーション時間の説明です。

まず、細いストリップのアニメーションの継続時間は次のように計算されます。

4 つのセグメント x 1 秒 + 中央の 3 つのドット x 0.5 秒 = 5.5 秒

次のステップは、細長いストリップアニメーションのキーフレームの時間配分を計算することです。各部分が 0.5 秒であると仮定すると、合計 11 の部分があり、各小セグメントに 2 つの部分、各ドットに 1 つの部分があります。100% を 11 で割ると、各部分が約 9.09% であることがわかります。次のステップは時間を割り当てることですが、これは簡単なので、これについてはあまり説明しません。

次に、細いストリップがアニメーション効果の最初のセグメントを完了して 2 番目のドットに到達すると、0.5 秒間一時停止します。この 0.5 秒が 2 番目のドットのアニメーション時間であるため、2 番目のドットのアニメーションの継続時間は次のようになります。

ストリップの実行が完了するまで待機します。1 セグメント x 1 秒 + 独自のアニメーション完了時間 x 0.5 秒 = 1.5 秒

同じ方法を使用して、各部分の時間を計算し、割り当てます。他のアニメーション効果も同様であり、ここでは詳しく説明しません。

3番目の効果:

今日はこの効果に焦点を当てます。まず、円形のプログレスバー効果を作成できるかと尋ねられた場合、それが静的な完全な円形のプログレスバーであれば、非常に簡単です。

.circleprogress{
    幅: 160ピクセル;
    高さ: 160px;
    border:20px 赤一色;
    境界線の半径: 50%;
}

.circleprogress{
    幅: 160ピクセル;
    高さ: 160px;
    border:20px 赤一色;
    border-left:20px 透明、実線;
    border-bottom:20px 透明;
    境界線の半径: 50%;
}

それでも私は、これは難しいことではないと言うでしょう。しかし、それらが正確に 45 度の倍数ではない場合はどうなるでしょうか?

まず 200 x 200 の正方形を設定し、その中でエフェクトを完成させます。

.circleProgress_wrapper{
    幅: 200ピクセル;
    高さ: 200px;
    マージン: 50px 自動;
    位置: 相対的;
    境界線:1px実線 #ddd;
}

次に、このコンテナーにさらに 2 つの長方形を配置します。各長方形はスペースの半分を占めます。

<div class="circleProgress_wrapper">
        <div class="ラッパー右">
            <div class="circleProgress rightcircle"></div>
        </div>
        <div class="ラッパー左">
            <div class="circleProgress leftcircle"></div>
        </div>
 </div>

.ラッパー{
    幅: 100ピクセル;
    高さ: 200px;
    位置: 絶対;
    トップ:0;
    オーバーフロー: 非表示;
}
。右{
    右:0;
}
。左{
    左:0;
}

ここで、.wrapper の overflow:hidden; が重要な役割を果たすことを強調したいと思います。両方の四角形にオーバーフロー非表示が設定されているため、四角形内の円を回転させると、オーバーフロー部分が非表示になり、目的の効果が得られます。

HTML 構造からわかるように、左と右の長方形の内側にはそれぞれ円があります。まずは右の半円について説明しましょう。

.circle進捗状況{
    幅: 160ピクセル;
    高さ: 160ピクセル;
    border:20px 透明実線;
    境界線の半径: 50%;
    位置: 絶対;
    トップ:0;
}
.rightcircle{
    border-top:20px 緑一色;
    border-right:20px 緑一色;
    右:0;
}

ご覧の通り、効果が出ています。実は元々半円弧だったのですが、上枠と右枠を設定したため上枠の半分がはみ出して隠れてしまっていたので、回転させることによって復元できます。

.circle進捗状況{
    幅: 160ピクセル;
    高さ: 160px;
    border:20px 透明実線;
    境界線の半径: 50%;
    位置: 絶対;
    トップ:0;
    -webkit-transform: 回転(45度)。
}

したがって、希望する角度に回転するだけで、任意の比率のプログレスバーを実現できます。次に、左半分の円弧を実装して完全な円にします。

.leftcircle{
    border-bottom:20px 緑一色;
    border-left:20px 緑一色;
    左:0;
}

次に、これを動かします。原理としては、まず右の半円弧を 180 度回転させ、次に左の半円弧を 180 度回転させます。こうすると、2 つの半円が次々に溢れて消え、プログレスバーが再び回転しているように見えます。

.rightcircle{
            border-top:20px 緑一色;
            border-right:20px 緑一色;
            右:0;
            -webkit-animation:circleProgressLoad_right 5秒線形無限;
        }
        .leftcircle{
            border-bottom:20px 緑一色;
            border-left:20px 緑一色;
            左:0;
            -webkit-animation:circleProgressLoad_left 5s 線形無限;
        }
        @-webkit-keyframes サークルProgressLoad_right{
            0%{
                -webkit-transform: 回転(45度)。
            }
            50%,100%{
                -webkit-transform: 回転(225度)。
            }
        }
        @-webkit-keyframes サークルProgressLoad_left{
            0%,50%{
                -webkit-transform: 回転(45度)。
            }
            100%{
                -webkit-transform: 回転(225度)。
            }
        }

もちろん、逆の効果を得るには角度を調整するだけです。

.circle進捗状況{
            幅: 160ピクセル;
            高さ: 160px;
            border:20px 透明実線;
            境界線の半径: 50%;
            位置: 絶対;
            トップ:0;
            -webkit-transform: 回転(-135度);
        }
        @-webkit-keyframes サークルProgressLoad_right{
            0%{
                -webkit-transform: 回転(-135度);
            }
            50%,100%{
                -webkit-transform: 回転(45度)。
            }
        }
        @-webkit-keyframes サークルProgressLoad_left{
            0%,50%{
                -webkit-transform: 回転(-135度);
            }
            100%{
                -webkit-transform: 回転(45度)。
            }
        }

さて、次のステップは最終的な効果を得ることです。冒頭で見たように、これは 360 Guard を使用してゴミをクリーンアップしたときの効果に少し似ていますが、もちろんあまり似ていません。

.circleProgress_wrapper{
            幅: 200ピクセル;
            高さ: 200px;
            マージン: 50px 自動;
            位置: 相対的;
            境界線:1px実線 #ddd;
        }

        .ラッパー{
            幅: 100ピクセル;
            高さ: 200px;
            位置: 絶対;
            トップ:0;
            オーバーフロー: 非表示;
        }
        。右{
            右:0;
        }
        。左{
            左:0;
        }
        .circle進捗状況{
            幅: 160ピクセル;
            高さ: 160px;
            境界線:20px実線rgb(232, 232, 12);
            境界線の半径: 50%;
            位置: 絶対;
            トップ:0;
            -webkit-transform: 回転(45度)。
        }
        .rightcircle{
            border-top:20px 緑一色;
            border-right:20px 緑一色;
            右:0;
            -webkit-animation:circleProgressLoad_right 5秒線形無限;
        }
        .leftcircle{
            border-bottom:20px 緑一色;
            border-left:20px 緑一色;
            左:0;
            -webkit-animation:circleProgressLoad_left 5s linear infinite;
        }
        @-webkit-keyframes サークルProgressLoad_right{
            0%{
                上境界線:20px 実線 #ED1A1A;
                右ボーダー:20px 実線 #ED1A1A;
                -webkit-transform: 回転(45度)。
            }
            50%{
                上境界線:20px 実線 rgb(232, 232, 12);
                右境界線:20px 実線 rgb(232, 232, 12);
                左境界線:20px 実線 rgb(81, 197, 81);
                ボーダー下部:20px ソリッド rgb(81, 197, 81);
                -webkit-transform: 回転(225度)。
            }
            100%{
                border-left:20px 緑一色;
                border-bottom:20px 緑一色;
                -webkit-transform: 回転(225度)。
            }
        }
        @-webkit-keyframes サークルProgressLoad_left{
            0%{
                ボーダー下部:20px 実線 #ED1A1A;
                左ボーダー:20px 実線 #ED1A1A;
                -webkit-transform: 回転(45度)。
            }
            50%{
                ボーダー下部:20px ソリッド rgb(232, 232, 12);
                左境界線:20px 実線 rgb(232, 232, 12);
                上境界線:20px 実線 rgb(81, 197, 81);
                右ボーダー:20px 実線 rgb(81, 197, 81);
                -webkit-transform: 回転(45度)。
            }
            100%{
                border-top:20px 緑一色;
                border-right:20px 緑一色;
                border-bottom:20px 緑一色;
                border-left:20px 緑一色;
                -webkit-transform: 回転(225度)。
            }
        }

ご覧のとおり、さまざまな境界線の色を変更するアニメーションがいくつかあります。自分で練習することができます。主な方法は、2 つの長方形を使用して、このような円形のプログレスバー効果を完成させることです。重要な役割を果たすオーバーフロールールに特に注意してください。