进度栏从父容器外部开始

Question

您将在最左侧看到小红色。进度从外部开始。 它也不会采用具有一定边界半径的容器形状。

<div class="progress-bar">
<div class="progress-line">
</div>
<div class="upload-percent">
Uploading... 72%
</div>
</div>

library IEEE;

use IEEE.STD_LOGIC_1164.ALL;
use IEEE.NUMERIC_STD.ALL;
use IEEE.STD_LOGIC_UNSIGNED.all;

entity Test_tb is
end entity Test_tb;

architecture Structural of Test_tb is

    signal sig1 : std_logic_vector (3 downto 0) := (others => '0');
    signal sig2 : std_logic_vector (7 downto 0) := (others => '0');
    signal clk : std_logic := '0';

begin
    clk_generate: process is
    begin
        wait for 5 ns;
        clk <= not clk;        
    end process clk_generate;

    gen_label : for gen_indx in 0 to 3 generate
    begin
        process (clk) is 
        begin
            if clk = '1' and clk'event then
                sig1 (gen_indx) <= '1';
                for loop_indx in 0 to 1 loop
                    sig2 (gen_indx * 2 + loop_indx) <= '1';
                end loop;
            end if; 
        end process;
    end generate gen_label;

end architecture Structural;

Answer 1

您应该使用隐藏在外部div上的溢出，如下所示：

.progress-bar {
  background: grey;
  width: 90%;
  height: 10px;
  border-radius: 15px;
  overflow: hidden;
}
.progress-line {
  height: 10px;
  background: red;
  border-radius: 15px;
  width: 2px;
}
.upload-percent {
  margin-top: 10px;
  text-align: center;
}

<div class="progress-bar">
<div class="progress-line">
</div>
<div class="upload-percent">
Uploading... 72%
</div>
</div>

Answer 2

取出“ upload-percent”，然后将overflow：hidden应用于进度条。

.progress-bar {
  background: grey;
  width: 90%;
  height: 10px;
  border-radius: 15px;
  overflow: hidden;
}

.progress-line {
  height: 10px;
  background: red;
  border-radius: 15px;
  width: 2px;
}

.upload-percent {
  margin-top: 10px;
  text-align: center;
}

<div class="progress-bar">
  <div class="progress-line">
  </div>
</div>
<div class="upload-percent">
  Uploading... 72%
</div>

Answer 3

.progress-bar {
  background: grey;
  width: 90%;
  height: 10px;
  border-radius: 15px;
  overflow:hidden;
}

您的.progress-bar类更新就足够了。