CSS 水平プログレスバーと垂直プログレスバーの実装コード

CSS 水平プログレスバーと垂直プログレスバーの実装コード

時々、素敵なスクロールバー効果を見るのは楽しいものです。ここでは、CSSを使用してそれを実現する方法を紹介します。

1. 水平プログレスバー

<html>
<ヘッド>
<title>水平プログレスバー</title>
<スタイル タイプ="text/css">   
    .ロードバー
    {
         幅:200px;
         高さ:25px;
         背景色:#fff;
         境界線:1px実線 #ccc;        
    }
    。バー
    {
        行の高さ:25px;        
        高さ:100%;
        表示:ブロック;        
        フォントファミリ:arial;
        フォントサイズ:12px;
        背景色:#bb9319;        
        色:#fff;
    }
</スタイル>
</head>
<本文> 
    <div class="ロードバー">
      <strong class="bar" style='width:30%;'>30%</strong>
    </div>
</本文>
</html>

効果は以下のとおりです。

2. 垂直プログレスバー

<html>
<ヘッド>
<title>垂直プログレスバー</title>
<スタイル タイプ="text/css">   
    .ロードバー
    {
         幅:25px;
         高さ:200px;
         背景色:#fff;
         境界線:1px実線 #ccc;
         位置:相対; 
    }
    。バー
    {
        幅:100%;
        表示:ブロック;        
        フォントファミリ:arial;
        フォントサイズ:12px; 
        背景色:#bb9319;
        色:#fff;       
        位置:絶対;
        下:0;        
    }
</スタイル>
</head>
<本文> 
    <div class="ロードバー">
      30%
    </div>
</本文>
</html>

CSS 水平プログレスバーと垂直プログレスバーの実装コードに関するこの記事はこれで終わりです。CSS 水平プログレスバーと垂直プログレスバーの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Vue での props の使い方の紹介

>>:  mysql バックアップ戦略の実装 (フルバックアップ + 増分バックアップ)

推薦する

Docker プルタイムアウトの解決策

最近、Docker イメージのプルが非常に不安定です。遅く、タイムアウトすることがよくあります。 x...

Win7 での Mysql 5.7.17 winx64 インストール チュートリアル

ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...

角度に基づくツリー型セカンダリテーブルを実現する

まず効果を見てみましょう: コード: 1.html <div class="user...

JavaScript オブジェクトの 3 つのプロパティ

目次1. 書き込み可能: 書き込み可能2. 列挙可能: 列挙可能3. 設定可能: 設定可能オブジェク...

IE6 で幅と高さがおかしいバグ

図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...

C# は MySQL コマンドラインのバックアップとリカバリを実装します

MySQL データベースをバックアップするためのツールは多数あります。過去 2 日間で、C# を使用...

MySQL ストアド プロシージャの作成と呼び出しの詳細な説明

目次序文ストアドプロシージャ: 1. ストアドプロシージャの作成と呼び出し1. ストアドプロシージャ...

MySQLデータ損失のトラブルシューティング事例

目次序文現地調査ケースの再現要約する序文最近、友人が突然WeChatで連絡してきて、MySQLでデー...

画像の半透明処理 画像と半透明の背景の実装のアイデアとコード

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

言及すべき8つのMySQLの落とし穴を共有する

MySQL はインストールが簡単で、高速で、豊富な機能を備えています。これはオープンソース運動のベン...

Element+vueを使用して開始時間と終了時間の制限を実装する

この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコード...

Windows 2019 アクティベーション チュートリアル (Office2019)

数日前、Server2019の正式版がリリースされたことを知り、面白半分でインストールしてみることに...

MySQLはinit-connectを使用してアクセス監査機能の実装を増やします

まず init-connect を通じて mysql 接続を初期化し、次にインスタンスに接続する必要...

MySQL データ型の詳細

目次1. 数値型1.1 数値型の分類1.1.1 浮動小数点数1.1.2 ビットタイプ1.1.3 時間...

HTML+CSS+JavaScript でガールフレンド版のスクラッチ カードを作成します (一度見ればすぐに覚えられます)

誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...