HTML/ Tailwind CSS : How can i center this wheel on this canvas

Question

I'm working on this website that displays a variety of spectrums using canvases. Right now i'm putting a spinning wheel to warn the user when the canvas is loading. The div named "loading" is the spinning wheel. I'm using Tailwind CSS to position the wheel correctly. But i'm still new in it.

 <!-- Tailwind --> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <!-- Body --> <div class="flex flex-row justify-center my-4"> <div class="relative w-1/2 flex flex-col mr-1"> <div class="w-full flex flex-row"> <button class="w-1/2 py-1 bg-green-600 text-xl text-gray-100 font-medium transition-colors hover:text-gray-900 focus:outline-none" id="button-spectrum" type="button"> Spectrum </button> <button class="w-1/2 py-1 bg-gray-100 text-xl font-medium transition-colors hover:text-green-600 focus:outline-none" id="button-normalized-spectrum" type="button"> Normalized spectrum </button> </div> <canvas aria-label="Spectrum graphics" class=" relative border border-green-600 bg-white z-1" id="chart-spectrum" role="graphics-document"></canvas> <canvas aria-label="Normalized spectrum graphics" class="relative border border-green-600 bg-white" id="chart-normalized-spectrum" role="graphics-document" style="display: none; !important"></canvas> <div id="loading" class=" absolute bottom-20 right-20 w-12 h-14 z-2 "> <img src="{% static 'polluxwebapp/images/spinningwheel.gif' %}" alt="Loading" /> </div>

Keep in mind the canvas is on the left (you can see the spinning wheel bottom right and this is roughly on the center of the page :

So how can i make it that it is centered to this canvas ? Any help is much appreciated

Answer 1

Just remove all the classes of spinner and simple add top-1/2 left-1/2 . 1/2 means 50% from the top and left which is center .

Below is code, view in full page screen.

 <!-- Welcome to Tailwind Play, the official Tailwind CSS playground! Everything here works just like it does when you're running Tailwind locally with a real build pipeline. You can customize your config file, use features like `@apply`, or even add third-party plugins. Feel free to play with this example if you're just learning, or trash it and start from scratch if you know enough to be dangerous. Have fun! --> <!-- Tailwind --> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <!-- Body --> <div class="flex flex-row justify-center my-4"> <div class="relative w-1/2 flex flex-col mr-1"> <div class="w-full flex flex-row"> <button class="w-1/2 py-1 bg-green-600 text-xl text-gray-100 font-medium transition-colors hover:text-gray-900 focus:outline-none" id="button-spectrum" type="button"> Spectrum </button> <button class="w-1/2 py-1 bg-gray-100 text-xl font-medium transition-colors hover:text-green-600 focus:outline-none" id="button-normalized-spectrum" type="button"> Normalized spectrum </button> </div> <canvas aria-label="Spectrum graphics" class=" relative border border-green-600 bg-white z-1" id="chart-spectrum" role="graphics-document"></canvas> <canvas aria-label="Normalized spectrum graphics" class="relative border border-green-600 bg-white" id="chart-normalized-spectrum" role="graphics-document" style="display: none; !important"></canvas> <div id="loading" class="absolute top-1/2 left-1/2"> <img src="http://commondatastorage.googleapis.com/codeskulptor-assets/week5-triangle.png" alt="Loading" /> </div>

You can set the value as per different screens also.

I had added an image ofd triangle instead of spinner.