| @@ -271,11 +271,48 @@ | ||
| 271 | 271 | exit; |
| 272 | 272 | } |
| 273 | 273 | ?> |
| 274 | 274 | <div id="thinkrank-setup-wizard" class="thinkrank-wizard-root"> |
| 275 | - <div class="thinkrank-wizard-loading"> | |
| 276 | - <img src="<?php echo esc_url(THINKRANK_PLUGIN_URL . 'static/svg/spinner.svg'); ?>" alt="" aria-hidden="true" class="thinkrank-svg-spinner thinkrank-animate-spin" style="width:48px;height:48px;"> | |
| 277 | - <p><?php esc_html_e('Loading Setup Wizard…', 'thinkrank'); ?></p> | |
| 275 | + <div class="tr-wizard tr-wizard-skeleton" role="status" aria-live="polite"> | |
| 276 | + <span class="screen-reader-text"><?php esc_html_e('Loading Setup Wizard…', 'thinkrank'); ?></span> | |
| 277 | + <div class="tr-wizard__panel" aria-hidden="true"> | |
| 278 | + <div class="tr-wizard__stepper-card"> | |
| 279 | + <ol class="tr-wizard__stepper"> | |
| 280 | + <?php for ($i = 0; $i < 8; $i++) : ?> | |
| 281 | + <li class="tr-wizard__step"> | |
| 282 | + <span class="tr-skel tr-skel--marker"></span> | |
| 283 | + <span class="tr-skel tr-skel--step-label"></span> | |
| 284 | + </li> | |
| 285 | + <?php endfor; ?> | |
| 286 | + </ol> | |
| 287 | + </div> | |
| 288 | + | |
| 289 | + <div class="tr-wizard__card"> | |
| 290 | + <div class="tr-wizard__header"> | |
| 291 | + <span class="tr-skel tr-skel--title"></span> | |
| 292 | + <span class="tr-skel tr-skel--subtitle"></span> | |
| 293 | + </div> | |
| 294 | + <div class="tr-wizard__divider"></div> | |
| 295 | + <div class="tr-wizard__body"> | |
| 296 | + <div class="tr-wizard-skeleton__rows"> | |
| 297 | + <?php for ($i = 0; $i < 3; $i++) : ?> | |
| 298 | + <div class="tr-wizard-skeleton__row"> | |
| 299 | + <span class="tr-skel tr-skel--row-icon"></span> | |
| 300 | + <span class="tr-wizard-skeleton__row-text"> | |
| 301 | + <span class="tr-skel tr-skel--row-title"></span> | |
| 302 | + <span class="tr-skel tr-skel--row-detail"></span> | |
| 303 | + </span> | |
| 304 | + <span class="tr-skel tr-skel--row-badge"></span> | |
| 305 | + </div> | |
| 306 | + <?php endfor; ?> | |
| 307 | + </div> | |
| 308 | + </div> | |
| 309 | + <div class="tr-wizard__footer"> | |
| 310 | + <span class="tr-skel tr-skel--btn tr-skel--btn-ghost"></span> | |
| 311 | + <span class="tr-skel tr-skel--btn"></span> | |
| 312 | + </div> | |
| 313 | + </div> | |
| 314 | + </div> | |
| 278 | 315 | </div> |
| 279 | 316 | </div> |
| 280 | 317 | <?php |
| 281 | 318 | } |
