GMX.css v. What&#s new?

The new minor update from GMX.css just launched now. What's the difference?

Progress

The progress element displays an indicator showing the completion progress of a task, typically displayed as a progress bar. And also, there's a different attribute to run this element, you can make the progress element with normal bar or circular look, and make it runs statically by value or leave it intermedinate.

The code is simple, just create the progress element for intermedinate.

<progress></progress>

Or, you can give it value and max too.

<progress value="30" max="100"></progress>

Wants the circular version? Add the circle class with --value variable.

<progress>



<p>Circle but intermedinate and spinning? Sure.<br>
</p>

<pre class="brush:php;toolbar:false"><progress>



<p>Try the demo here:</p>

<p><iframe height="600" src="https://codepen.io/LIGMATV/embed/xbKEWGb?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy">
</iframe>
</p>

<h2>
  
  
  More
</h2>

<p>Not just add progress, we also made the web more responsive.<br>
See the difference and try inspect: v0.0.10 vs v0.0.12</p>

<hr>

<p>Cool right? Getting started now by add single line in your HTML file!<br>
</p>

<pre class="brush:php;toolbar:false"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LIGMATV/gmx.css@main/gmx.css">

GMX.css repository
GMX.css website

The above is the detailed content of GMX.css v. What&#s new?. For more information, please follow other related articles on the PHP Chinese website!