I am working with flow_builder to manage navigation. What I would like to achieve, is in response to a state change (to a loading state) push an "overlay page" which just shows a Circular progress indicator, obscures a bit the background, and protects the screen from user actions. This page would then be "popped" out when state changes from loading state to a loaded state.
I did manage to push a completely opaque loading page using flowbuilder (fully opaque even when setting a Container with a semi opaque background at the root of the page), but I would like the user being able to see the background.
I want to show a loading image after page submit. I want it to be like , loading image show in the middle of the page and it should have a transparent background to show the page content. I have used following
I tried to inspect the loading element in order to modify its CSS. There are two issues though. First, passing the style property to dcc.Loading only modifies the spinner, not the overlay. Second, the overlay itself has no class so I cannot define my custom CSS for it.
I would like to have a loading spinner overlay my graph (without hiding the graph) while the graph is loading. Is there a way to make the Loading component have a transparent background/not hide the underlying children?
@sislvacl @nickest Both solutions does not work for me. Maybe im doing something wrong. The children of my Loading component is a DataTable. In my callback the output is the data of the datatable. The loading bars are visible but not the datatable. the datatable is visible when loading is finished(callback returns). I put the loader-warpper to theh assets.css. What im doing wrong? Best regards!
When I load the attached tiff into macOS Preview or Photoshop, I see a transparent background. When I load it in AP it shows solid black. How do I get it to show the transparency? (Or, why doesn't it show transparency in the first place?)
Thank you everyone. I think this falls under the rubric of "bug or feature"... Following @lacerto's video instructions as referenced by @walt.farrell displays the image correctly (which should be black-on-transparent).
Personally, I think this is a bug. If I open an image which is black-on-transparent, I shouldn't be faced with an all-black image, even if the alpha channel is still available somewhere. The default behavior should show black-on-checkerboard, IMHO, or at least something that contrasts with black (as is the case with the Preview app).
I need a semi-transparent background that covers the whole page, with a semi-transparent spinner to indicate the page is still in loading process. I want a simple plain CSS solution. Anybody can show me how?
I have a .png logo with transparent background, and I want to load it onto labview FP prorgrammatically. My problem is, if I load it programmatically (read image, display on image display), the background won't be transparent any more. But if I import it and paster it on labview FP manually, it looks OK.
I am assuming when you say you are loading the image programatically, that you are sending it to a picture control/indicator. This works differently than just dragging an image onto the front panel to create decorations.
You can sort of do it if you an image of the background as well (e.g. if you capture an image of the panel when the picture control is empty). As mentioned, the alpha channel is actually read from the PNG file, so what you need to do is average each component of each pixel with the data from the other image, but use the alpha information as a weight.
You can also get rid of the picture control border by using a classic picture control or by right clicking the 3D frame and pressing the space bar a couple of times in the color dialog. This toggles between FG and BG colors and will allow you to color the frame transparent.
Thanks, yes I do realise in this screenshot the below track is empty but the title is still not transparent when the below track was filled.
What is the mediainfo link before I consider downloading and what will it show me?
The H.264 specification does not support alpha channel. The video shown in the screenshot above most definitely does not have transparency data in it. As Elusien said, transparent animations are typically saved as QuickTime Animation or ProRes 4444 in a MOV container. Shotcut supports both.
I have set up a number of sliders on the home page and other pages.
When the image is loading, my client wants the page background to be seen as opposed to the white loading background that is currently seen.
Thank you! This is exactly what I want.
Just one question though. You said that the second part of the code removes the shadow while loading. It removes it altogether. Is there a way to remove it only when loading?
As my title says my goal is to create a gif with a transparent background. I've created an animation within After Effects. Because there is no possibility to export as a gif with that kind of background, I export it as a png sequence and remerge all images later in Photoshop. Finally, I can export it as a gif with a transparent background. Now if I do so, the gif has a transparent background but the animation is surrounded by a white stroke and is a kind of pixely. Does anyone have an idea how to fix this or maybe another possible solution for me? Other file formats than gif like svg etc. are also possible. In the end this animation is going to be used as a loading animation for web.
I've exported it already in many file formats that allow an alpha channel but still no success. Something I wanna say about the pixely resolution. Sure it can be the small resolution but on the other hand, why is it high res with a colored background then?
Unfortunately, GIFs don't support Alpha transparency. There's no way to fix this really. GIFs only support either fully transparent, or fully opaque pixels, with nothing in between. So basically, the usefulness of the format for your particular use-case will depend entirely on the background you are placing it on.
If the background is a single colour, or close to being a single colour, then you could use the "Matte" option to change the colour of the outer pixels (the matte), so that when the GIF is placed over a background image, it should blend in with the background. Obviously, you need to know what the background colour will be for this to even have a chance of working.
But if you already know what color the background will be on the website, you can set your own outline color with that it won't look pixelated and it will blend with the background color.
I frequently use PNG files in photo editing apps on my iPhone. I started having problems with my PNGs a month or two ago in which half of them no longer show a transparent background when imported into my photo editing apps. I don't exactly know what went wrong or how, since images that previously displayed a transparent background suddenly don't anymore. I even exported them to my computer, to iCloud Drive, then back to the Photos app to check if they were still PNG files and didn't somehow convert themselves to JPEG, but they still were. When I exported them, they appeared having transparent backgrounds, but when I sent them back to my phone, they were white. Does anyone have any idea what's happening?
Another problem I ran into that's not really a problem (yet), just rather annoying. I have an image of a character that has a transparent background, and when I blit the image to the screen, it works just fine. However, after making a tiled background on the screen, then blitting the image again, I get THIS.
he wants what is behind the canvas to be visible. you can test by inspecting the canvas and editing the containing div (id=canvas-zone) style to include: background-color: green; and you will see that becomes the background of the canvas.
To get around this I have to either change the format of my images to PNG (which makes them substantially larger, but does preserve the transparent background), change the background to something that is not transparent in my WEBP images (not always a great idea), or convert them to JPG format, which also loses transparency.
So which is it? Does JetPack accelerate WEBP images or does it not do so? My testing clearly indicates that it tries to do so and breaks them in the process if they happen to have transparent backgrounds, which is clearly the case for us.
Hi! I am having the same issue and could use your help with this, please! I tried pasting in the following code right after this code from my Debut theme. Did I paste this in correctly? My logo is still showing up with gray background. What am I doing wrong?
I've been working on a document which involves the transparent package. It compiles fine with pdfLaTeX, but when I try bare LaTeX (I want to get a DVI file) it generates an Undefined control sequence error. Minimal (non-)working example:
I have a feeling this is nothing to do with the transparent package per se, and is perhaps just something needing updating. But I don't know how to find out what's causing the problem, or how to fix it. If it's relevant, I'm using MikTeX 2.9.
Thanks for pointing out the old versions there of datatables. I double checked and made sure i have the most current scroller and scrollresizer. When using both of them the loading background appears when there are less records to fill the available space.
The method displays a semi-transparent background and an animated GIF. It is designed to be used during asynchronous remote data requests. Browsers normally do not animate GIFs during rendering processes or other resource-intensive tasks in the browser's main thread. If kendo.ui.progress() is used while performing such tasks, then the GIF animation may stop for a while. A possible workaround is to remove the animated GIF or replace it with a non-animated image, as shown below.
Loading GIF or, so called loader gif is an animation that indicates a loading process on a web-site or an application. Being an critically important part of web-site and application design and usability, mostly the animations are used to show that something is loading on the background (e.g. AJAX applications). The animation objects are usually used in GIF format which is very popular due to it's history, but the loading images in SVG and CSS format are getting more and more poplular because of infinite size scalability - they can have any dimensions and relatively smaller size in bytes. There is also APNG (or animated PNG) format which appeared because of the GIF limitations, but was denied by a number of comminities in the beginning. At the moment the APNG format is supported by most major browsers now. It's still not very popular due to it's size in bytes comparing to all other formats.
aa06259810