I have a progressBar spinner like this :
<p-progressSpinner></p-progressSpinner>
I want to make it center and overlay. How can I do that ?
Thanks .
This works for me: Original Url
html
<div class="progress-spinner" *ngIf="true">
<p-progressSpinner></p-progressSpinner>
</div>
css
.progress-spinner {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.progress-spinner:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.53);
}
Not sure what you mean by overlay, but if you want to have a progress spinner inside dialog then
<p-dialog [(visible)]="display" [showHeader]="false" [resizable]="false" [modal]="true" [focusOnShow]="false" >
<i class="pi pi-times" style="float:right" (click)="onCancel()"></i>
<div style="width: 900px;height: 500px;padding-top: 20%;">
<p-progressSpinner></p-progressSpinner>
</div>
</p-dialog>
I'm using PrimeVue (similar to PrimeNG, I think) and this is what I do to get a full-screen overlay with a progress spinner.
In my HTML, I have this...
<BlockUI :blocked="isLoading" :fullScreen="true"></BlockUI>
<ProgressSpinner v-show="isLoading" class="overlay"/>
Then in my css file I have this style...
.overlay {
position:fixed !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
z-index: 100; /* this seems to work for me but may need to be higher*/
}
In my TypeScript, I have a reactive variable...
const isLoading = ref(false)
Then in various functions, I set the state of that variable as needed...
isLoading.value = true /* to show overlay + spinner */
isLoading.value = false /* to hide overlay + spinner */
Related
I have a stackblitz here
This should be the simplest thing but I can't see why its not working.
I have react app with Typescript and a styled components, I'm sure none of that is the problem this is just css.
I'm trying to position two divs on top of each other.
The container has position: relative;
And then the div are absolutely positioned.
.FlexContainerColOne,
.FlexContainerColTwo{
position: absolute;
top: 0;
left: 0;
}
But both div disappear, what am I missing
From what I am seeing here is that they are not disappearing, you just can't see them because they don't have a width assigned or content. See the following, I added width, and opacity to show the two divs merging over each other.
stackblitz snippet
Result:
flexcontainer {
position: relative;
}
.FlexContainerColOne,
.FlexContainerColTwo {
position: absolute;
top: 0;
left: 0;
}
.FlexContainerColOne {
background: red;
height: 500px;
width: 500px;
opacity: 0.5;
}
.FlexContainerColTwo {
background: green;
height: 500px;
width: 500px;
opacity: 0.3;
}
<flexcontainer>
<div class="FlexContainerColOne"></div>
<div class="FlexContainerColTwo"></div>
</flexcontainer>
I use this loader spinner using css and jquery. I would like to blur the background exept the image from URL. Any idea ?
Css:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
background: url("http://enjoycss.com/bg-img/custom/107898-1py1ieu.1zm9.gif")
center no-repeat #33333308;
}
Js
<script>
$(window).load(function() {
$(".se-pre-con").fadeOut("slow");;
});
</script>
Thank you
When the gif is showing you can add a :before pseudo-element to the body. The blurry effect can be tricky to achieve, I'd recommend using a blurry PNG or a svg as background, in the snippet below I'm just using color:
body:before{
content:'';
background-color: #dbdbdb;
opacity: 0.7;
background-size: cover;
width: 100%;
padding-bottom: 100%;
position: fixed;
z-index: 1;
}
You can replace the body selector with a class and then with some jQuery remove or add the class to the body.
See this fiddle for reference: https://jsfiddle.net/3r1zc9gw/3/
I am trying to build a page that will display a .png image of a computer (with a transparent screen), which I can then layer a website screenshot behind and scroll through, to give the effect of scrolling a real website.
For example, this page, but it can be with a scrollbar instead of automatic scrolling: http://preview.themeforest.net/item/fwrd-music-band-musician-wordpress-theme/full_screen_preview/12087239
I've actually managed to achieve the required, but I can only scroll the long website image (#instagram) when I 'inspect' the page. I assume the #laptop image is blocking the #instagram image somehow?
#container {
position: relative;
top: 0;
left: 0;
}
#instagram {
z-index: 1;
width: auto;
height: 400px;
border-radius: 5px;
overflow: scroll;
position: absolute;
top: 0px;
left: 0px;
}
#laptop {
z-index: 2;
width: auto;
height: auto;
position: relative;
top: 0;
left: 0;
}
You could use a pseudo element with pointer events none for your laptop and then just position your scrollable background where the screen is:
.laptop {
position: relative;
/* width and height of laptop image */
width: 584px;
height: 360px;
}
.laptop:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(https://pngimg.com/uploads/laptop/laptop_PNG5938.png) left top no-repeat;
background-size:cover;
z-index:2;
pointer-events:none;
}
.background {
/* width and height of screen */
width:414px;
height:229px;
overflow:auto;
position:absolute;
/*POsition of screen in image */
top: 28px;
left:82px;
}
<div class="laptop">
<div class="background">
<img src="https://www.fillmurray.com/412/600">
</div>
</div>
Trying to figure out why this frame http://www.kicks.se/#take-your-pick
Will not render on an Ipad in landscape mode
The css that I can see is
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Any ideas on how this can be expanded to be shown the entire frame? I am going mad looking at it!
Well, it depends if you set your width/height depending on the parent container. The idea to match the parent device's height and width is there in the OP code. But this issue may also depend on browsers AND/OR padding issues. This example represents this technique here.
HTML:
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
CSS:
.box {
position: relative;
width: 50%; /* desired width */
}
.box:before {
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
I have
<div id=overlay>
<div></div>
</div>
the height and width of the outer div is set to 100%.
What happens here is, the 100% refers to the size of the element inside (inside div).
I have a dynamically changing element on inside div, and I wanted to be my outer div got the size of the page screen.
NOTE that these div (outer and inside) are a popup element. So I wanted to cover all other elements behind the popup that's why I need the 100% of the page behind.
this is my css for the outer div
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
min-height: 100%;
min-width: 100%;
height: auto !important;
width: auto !important;
text-align:center;
z-index: 1000;
background-image:url(template/popup-bg.png);
}
my js
function overlay(e)
{
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
Simply change the HTML to this
<div id='overlay' class='hideOverlay'>
<div></div>
</div>
Now on clicking simply change the class.
Change your js to this
function overlay(e)
{
$('#overlay').attr('class', 'showOverlay');
}
Check the following style
.showOverlay
{
background-color: red;
height: 100%;
left: 0;
top: 0;
opacity: 0.2;
position: fixed;
width: 100%;
z-index: 1001;
}
.hideOverlay
{
display:none;
}
Background-color is given just to check the div's visibility. Change it as per your choice.
It is nice to have some opacity for overlays to have a better look and feel effect.
Try to set:
position: absolute;
Something like this...
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;