Skip to main content

How to pause animation play state for everything except one div until the dom is loaded

Please be kind, I haven't made a post on here in forever but I have just now ran into an issue I'm looking for some quick help with. It should be really easy syntax/formatting that I'm just not familiar with and I'm struggling to find the correct answer.

Essentially, I am using the following CSS to pause the animation play state of everything on my page until the dom is fully loaded -

.js-loading * {
  animation-play-state: paused !important;
}

.js-loading *:before {
  animation-play-state: paused !important;
}

.js-loading *:after {
  animation-play-state: paused !important;
}

.qt-loading {
  width: 3em;
  height: 3em;
  margin: 0 auto;
  align-content: center;    
}

#qt-loading-qtload001 > div {
  align-content: center;
  top: 50%; 
  margin: 0 auto;
  margin-left: -.5%;
  position: fixed;
  width: 3em;
  height: 3em;
  border: 6px solid;
  border-top-color: transparent;
  border-right-color: white;
  border-bottom-color: white;
  border-left-color: white;
  border-radius: 50%;
  animation: qt-loadanim001 1s infinite linear;
  animation-delay: -100000s;    
}

@keyframes qt-loadanim001 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

But I now have one div where I need the animation to NOT be paused until the dom is loaded (class 'qt-loading')... How would I make this CSS pause everything on my page EXCEPT 'qt-loading'? I would assume the :not selector, but I'm unsure how to combine that with my current CSS.

Thank you so so so much

Edit:

and for more context, here is the html / js

document.documentElement.className += " js-loading";

window.addEventListener("load", showPage, false);

function showPage() {
  document.documentElement.className = document.documentElement.className.replace("js-loading","");
}

<div id="qt-loading-qtload001" class="qt-loading"> <div></div>

And this is the new CSS I have tried using the :not selector, but I could not get it to work -

.js-loading *:not(.qt-loading) {
  animation-play-state: paused !important;
}

.js-loading *:not(.qt-loading):before {
  animation-play-state: paused !important;
}

.js-loading *:not(.qt-loading):after {
  animation-play-state: paused !important;
}

.qt-loading {
  animation-play-state: running !important;
}

.qt-loading:before {
  animation-play-state: running !important;
}

.qt-loading:after {
  animation-play-state: running !important;
}
Via Active questions tagged javascript - Stack Overflow https://ift.tt/sSBgmo0
Labels:

Comments

Post a Comment

Popular posts from this blog

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console...
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

The number of nodes and edges I calculated manually and by a method provided by networkx library dont match

I am trying to analyse a graph using networkx library in Python. I have implemented a function that returns the nodes and edges of that graph. After that I counted the number of nodes and edges by implementing the len() function for nodes and edges, which gave me 17 for both nodes and edges. However, when I used the method graph.number_of_nodes() of networkx library it gave me 53. My code: import pandas as pd import networkx as nx import matplotlib.pyplot as plt header_list = ["a","b","w"] E =pd.read_csv("aves-barn-swallow-contact-network.edges",sep=" ",header= None,names=header_list) # print(E.head()) # prints first few rows of the csv file G = nx.from_pandas_edgelist(E,"a","b",["w"]) nx.draw(G) plt.show() class GraphAnalyse: #finding nodes and edges def nodeEdge(self,Graph): nodes = Graph.nodes() edges = Graph.edges() ...
Post a Comment
Read more