1つのdivにローダーオーバーレイ

Angularプロジェクトでは、指定したdivにローディングオーバーレイを設定しようとします。私は私のページ全体にこのオーバーレイを配置したくありません（私は推測するほうが簡単でしょう）。ご覧のとおりここ1つのdivにローダーオーバーレイ

は私divは明らかにそれを見るために赤い枠があり、私がこれまでに達成し何のFiddle（

#loader-wrapper { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    background-color: rgba(0, 0, 0, 0.3); 
}

です。私の#loader-wrapperは全体divの領域をカバーしていません。

私はそれが全体divに拡張し、垂直方向と水平方向の両方ローダーを中心としたいと思います。

私はそれを上に置こうとしましたが、成功しませんでした。

ローダーのサイズが相対的である可能性がある場合、将来的にいくつかの問題を避けることができます。私のdivにはほとんどテキストが含まれていないと思います...しかし、それを達成する方法はありません。

出典

2016-12-08 BlackHoleGalaxy

あなたは[この]（https://jsfiddle.net/sh4k10rp/1/）を探しています。 – Huelfe

を追加する必要があります。それは文脈からそれを取り除くでしょう。 topとleftとrightとbottomの要素は、position: relativeが設定された最も近い要素に相対的です。 position: relative;の要素がない場合は、<body>まですべて移動します。

ローダーの中央にないので、marginも変更しました。エレメント：親と "絶対位置" へ：

追加 "相対位置："

.container { 
 
    position: relative; 
 
} 
 
#loader-wrapper { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1000; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
} 
 
#loader { 
 
    display: block; 
 
    position: relative; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: -50px 0 0 -50px; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    border-top-color: #3498db; 
 
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
 
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
 
} 
 
    
 
#loader:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    right: 5px; 
 
    bottom: 5px; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    border-top-color: #e74c3c; 
 
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
 
     animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
 
} 
 
    
 
#loader:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 15px; 
 
    right: 15px; 
 
    bottom: 15px; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    border-top-color: #f9c922; 
 
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
 
     animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
 
} 
 
    
 
@-webkit-keyframes spin { 
 
    0% { 
 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
     -ms-transform: rotate(0deg); /* IE 9 */ 
 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
     -ms-transform: rotate(360deg); /* IE 9 */ 
 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
} 
 
@keyframes spin { 
 
    0% { 
 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
     -ms-transform: rotate(0deg); /* IE 9 */ 
 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
     -ms-transform: rotate(360deg); /* IE 9 */ 
 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6" style="border: 1px solid red;"> 
 
     <p>In hac habitasse platea dictumst. Sed justo diam, imperdiet sit amet hendrerit sit amet, euismod ut dolor. Vivamus ac nisi eget felis pretium ullamcorper. Curabitur id libero ante. Suspendisse potenti. Nulla eget aliquam mi. Ut arcu mi, vulputate eget ex ut, tincidunt aliquam mauris. Suspendisse faucibus justo vel tellus laoreet imperdiet. In nec ipsum finibus, interdum mauris ut, lobortis augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Aliquam quis blandit dolor.</p> 
 

 
     <p>Donec aliquam est non viverra hendrerit. Etiam in faucibus erat, ut pulvinar nulla. Nulla in tincidunt enim. Suspendisse potenti. Morbi tristique nisl mi, et tempor massa facilisis sit amet. Integer eu iaculis diam. Nullam accumsan dapibus nulla, eget maximus nisi molestie eget.</p> 
 
     <div id="loader-wrapper"> 
 
      <div id="loader"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-12-08 15:20:01

ありがとうございました。この単純なルールを忘れてしまった。私のスクリプトでは、私は奇妙なことに遭遇します。レンダリングされた青色の「意図しない」サークルです：https://i.imgsafe.org/97d1d2288d.png – BlackHoleGalaxy

あなたがtopとleftが動作するためにはposition: absolute;に設定する必要があり、親でposition:relative（.col-md-6）と子供のabsolute#loader-wrapper

.col-md-6 { 
 
    position: relative; 
 
    border: red solid 1px; 
 
} 
 
#loader-wrapper { 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1000; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    position: absolute; 
 
} 
 
#loader { 
 
    display: block; 
 
    position: relative; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: -75px 0 0 -75px; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    border-top-color: #3498db; 
 
    -webkit-animation: spin 2s linear infinite; 
 
    /* Chrome, Opera 15+, Safari 5+ */ 
 
    animation: spin 2s linear infinite; 
 
    /* Chrome, Firefox 16+, IE 10+, Opera */ 
 
} 
 
#loader:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    right: 5px; 
 
    bottom: 5px; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    border-top-color: #e74c3c; 
 
    -webkit-animation: spin 3s linear infinite; 
 
    /* Chrome, Opera 15+, Safari 5+ */ 
 
    animation: spin 3s linear infinite; 
 
    /* Chrome, Firefox 16+, IE 10+, Opera */ 
 
} 
 
#loader:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 15px; 
 
    right: 15px; 
 
    bottom: 15px; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    border-top-color: #f9c922; 
 
    -webkit-animation: spin 1.5s linear infinite; 
 
    /* Chrome, Opera 15+, Safari 5+ */ 
 
    animation: spin 1.5s linear infinite; 
 
    /* Chrome, Firefox 16+, IE 10+, Opera */ 
 
} 
 
@-webkit-keyframes spin { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    /* Chrome, Opera 15+, Safari 3.1+ */ 
 
    -ms-transform: rotate(0deg); 
 
    /* IE 9 */ 
 
    transform: rotate(0deg); 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    /* Chrome, Opera 15+, Safari 3.1+ */ 
 
    -ms-transform: rotate(360deg); 
 
    /* IE 9 */ 
 
    transform: rotate(360deg); 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    /* Chrome, Opera 15+, Safari 3.1+ */ 
 
    -ms-transform: rotate(0deg); 
 
    /* IE 9 */ 
 
    transform: rotate(0deg); 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    /* Chrome, Opera 15+, Safari 3.1+ */ 
 
    -ms-transform: rotate(360deg); 
 
    /* IE 9 */ 
 
    transform: rotate(360deg); 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <p>In hac habitasse platea dictumst. Sed justo diam, imperdiet sit amet hendrerit sit amet, euismod ut dolor. Vivamus ac nisi eget felis pretium ullamcorper. Curabitur id libero ante. Suspendisse potenti. Nulla eget aliquam mi. Ut arcu mi, vulputate 
 
     eget ex ut, tincidunt aliquam mauris. Suspendisse faucibus justo vel tellus laoreet imperdiet. In nec ipsum finibus, interdum mauris ut, lobortis augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Aliquam quis blandit 
 
     dolor. 
 
     </p> 
 

 
     <p>Donec aliquam est non viverra hendrerit. Etiam in faucibus erat, ut pulvinar nulla. Nulla in tincidunt enim. Suspendisse potenti. Morbi tristique nisl mi, et tempor massa facilisis sit amet. Integer eu iaculis diam. Nullam accumsan dapibus nulla, 
 
     eget maximus nisi molestie eget.</p> 
 
     <div id="loader-wrapper"> 
 
     <div id="loader"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-12-08 15:19:46 dippas

は答えがあります。

.parent { 
    position: relative; 
} 

#loader-wrapper { 
    position: absolute; 
}

https://jsfiddle.net/sh4k10rp/8/

出典

2016-12-08 15:26:04 Vadim

1つのdivにローダーオーバーレイ

答えて

関連する問題