Skip to main content

Drupal 8 Ajax Throbber CSS


.ajax-progress,
.ajax-progress-throbber,
.ajax-progress-fullscreen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  opacity: 1;
  background: rgba(255, 255, 255, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  overflow: hidden;
  text-indent: -99999em;
}
 
.ajax-progress-throbber:before,
.ajax-progress-fullscreen:before {
  content: " ";
  display: block;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 0.8s infinite linear;
  animation: spin 0.8s infinite linear;
  border-radius: 120px;
  border-width: 10px;
  border-style: solid;
  border-color: #D6232F transparent #D6232F transparent;
  overflow: hidden;
  text-indent: -99999em;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
 
@-webkit-keyframes spin {
  to {
    transform: rotate(360deg); 
  }
}
 
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Comments

Popular posts from this blog

Main menu dropdown parent item clickable in Drupal 8 using Bootstrap 4

 Edit menu--main.html.twig template file {# /**  * @file  * Bootstrap Barrio's override to display a menu.  *  * Available variables:  * - menu_name: The machine name of the menu.  * - items: A nested list of menu items. Each menu item contains:  *   - attributes: HTML attributes for the menu item.  *   - below: The menu item child items.  *   - title: The menu link title.  *   - url: The menu link url, instance of \Drupal\Core\Url  *   - localized_options: Menu link localized options.  *   - is_expanded: TRUE if the link has visible children within the current  *     menu tree.  *   - is_collapsed: TRUE if the link has children within the current menu tree  *     that are not currently visible.  *   - in_active_trail: TRUE if the link is in the active trail.  */ #} {% import _self as menus...

Add JS to the bottom of the page in Drupal 7

How to add JS at bottom of a particular page in Drupal 7 Step 1: Get the page id. In case of front page "is_front"  Step 2: In template.php file of your theme add the below code : function illume_preprocess_page(&$variables) { if ($variables['is_front']) { drupal_add_js(path_to_theme().'/js/util.js', array('type' => 'file', 'scope' => 'footer')); drupal_add_js(path_to_theme().'/js/main.js', array('type' => 'file', 'scope' => 'footer')); drupal_add_js(path_to_theme().'/js/slideimage.js', array('type' => 'file', 'scope' => 'footer')); $variables['bottom_scripts'] = drupal_get_js(); } } This way you can add JS file using drupal_add_js() and define scope as footer. Step 3: Now you can use bottom_script variable to the page tpl file where you want to add JS print $bottom_scripts;

Use Case Diagram for Online Book Store