Using porto html spinner in admin side

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • March 3, 2021 at 3:41 am #10036588
    simplyjessica
    Participant

    Just updated both my Porto HTML and ADMIN themes to the latest, my gawd fantastic job guys, I am loving this! I just purchased a new copy of both just to say thanks!

    Question, the HTML version has some cool loading spinners, but the admin just has the default three flashing dots. How can I use the html spinner in the admin side?

    <body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'spinningSquare'}">
    <div class="loading-overlay">
    <div class="bounce-loader">
    <div class="cssload-spinning-square-loading"></div>
    </div>
    </div>

    Thanks!


    Template Version: Latest
    March 3, 2021 at 7:07 am #10036602
    Support
    Keymaster

    Hello,

    Thanks for the kind words!

    Currently the new loader effects are available only at Porto HTML. But you can easily get the codes to apply on Porto Admin.

    1) First add this HTML in the body tag:

    <body class="loading-overlay-showing" data-loading-overlay>
	<div class="loading-overlay">
		<div class="bounce-loader">
			<div class="cssload-zenith-container">
				<div class="cssload-zenith"></div>
			</div>
		</div>
	</div>

    2) Get the CSS code for the specific load you wish and paste in the custom.css file. In this case I got the code of “Zenith” effect:

    /* Zenith Effect */
.cssload-zenith-container {
	width: 100%;
	height: 49px;
	text-align: center;
}

.cssload-zenith {
	width: 49px;
	height: 49px;
	margin: 0 auto;
	border-radius: 50%;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	box-shadow: 3px 3px 1px rgb(0, 136, 204);
	-webkit-animation: cssload-spin 690ms infinite linear;
	animation: cssload-spin 690ms infinite linear;
}

@keyframes cssload-spin {
	100% {
		transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

    * The CSS code is in the theme-elements.css of Porto HTML. You search by class name.

    We hope this helps!

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.

    If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

This topic is marked as "RESOLVED" and can not rceive new replies.