GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → gladeye → Aframe Preloader Component

gladeye / Aframe Preloader Component

Licence: mit
A preloading bar that automatically displays while scene assets load.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

loaderspinnersceneaframespinnersloading-bar

Projects that are alternatives of or similar to Aframe Preloader Component

Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+2766.67%)
Mutual labels:  loader, spinner, spinners, loading-bar
react-awesome-loaders
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
Stars: ✭ 146 (+440.74%)
Mutual labels:  loader, spinner, spinners
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-22.22%)
Mutual labels:  loader, spinner, spinners
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (+840.74%)
Mutual labels:  loader, spinner, spinners
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: ✭ 111 (+311.11%)
Mutual labels:  spinner, spinners, loading-bar
react-bootstrap-button-loader
React ButtonLoader with Bootstrap flavor
Stars: ✭ 25 (-7.41%)
Mutual labels:  loader, spinner
busy-load
A flexible loading-mask jQuery-plugin
Stars: ✭ 76 (+181.48%)
Mutual labels:  loader, spinner
material-circular-loader
Material Circular Loader in SCSS like a boss. Demo: http://codepen.io/YuRen/details/KdKKax
Stars: ✭ 13 (-51.85%)
Mutual labels:  loader, spinner
Vue Spinners
💫 A collection of loading spinner components for Vuejs
Stars: ✭ 255 (+844.44%)
Mutual labels:  loader, spinners
Progress bar
Command-line progress bars and spinners for Elixir.
Stars: ✭ 281 (+940.74%)
Mutual labels:  spinner, spinners
Vue Progress Path
Progress bars and loading indicators for Vue.js
Stars: ✭ 309 (+1044.44%)
Mutual labels:  spinner, loading-bar
KVSpinnerView
KVSpinnerView is highly customizable progress HUD
Stars: ✭ 37 (+37.04%)
Mutual labels:  loader, spinner
nanospinner
🌀 The simplest and tiniest terminal spinner for Node.js
Stars: ✭ 108 (+300%)
Mutual labels:  spinner, spinners
spinner
A simple, configurable, multi-platform spinner
Stars: ✭ 42 (+55.56%)
Mutual labels:  spinner, spinners
InstagramActivityIndicator
Activity Indicator similar to Instagram's
Stars: ✭ 49 (+81.48%)
Mutual labels:  loader, spinner
vue-loading
Loading bar for Vue.js apps using axios
Stars: ✭ 19 (-29.63%)
Mutual labels:  loader, loading-bar
React Loader Spinner
Collection set of react-spinner for async operation
Stars: ✭ 378 (+1300%)
Mutual labels:  loader, spinner
Ngx Ui Loader
Multiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+
Stars: ✭ 368 (+1262.96%)
Mutual labels:  loader, spinner
Yaspin
A lightweight terminal spinner for Python with safe pipes and redirects 🎁
Stars: ✭ 413 (+1429.63%)
Mutual labels:  loader, spinner
Ng Http Loader
🍡 Smart angular HTTP interceptor - Intercepts automagically HTTP requests and shows a spinkit spinner / loader / progress bar
Stars: ✭ 327 (+1111.11%)
Mutual labels:  loader, spinner
View All Similar Projects ➔

aframe-preloader-component

Version License

A preloading bar that automatically displays while scene assets load.

For A-Frame.

API

Property Description Default Value
type type of CSS framework to use - acceptable values are: 'bootstrap' or 'custom' bootstrap
id ID of the auto injected preloader modal preloader-modal
autoInject whether or not to auto-inject the preloader html into the page true
target the html target selector #preloader-modal
progressValueAttr an attribute of the progress bar to set when progress is updated aria-valuenow
barProgressStyle target css style to set as a percentage on the bar width
bar target css style to set as a percentage on the bar width
label html class of label in preloader - used to set the percentage #preloader-modal .progress-label
labelText loading text format {0} will be replaced with the percent progress e.g. 30% {0}% Complete
autoClose automatically close preloader by default - not supported if clickToClose is set to 'true' true
clickToClose whether the user must click a button to close the modal when preloading is finished false
closeLabelText default label text of click to close button Continue
title title of preloader modal. Blank by default
debug whether or not to enable logging to console false
disableVRModeUI whether or not to disable VR Mode UI when preloading true
slowLoad deliberately slow down the load progress by adding 2 second delays before updating progress - used to showcase loader on fast connections and should not be enabled in production slowLoad
doneLabelText text to set on label when loading is complete Done

Examples

See the examples folder or https://gladeye.github.io/aframe-preloader-component/ for example usage.

Installation

Browser

Install and use by directly including the browser files as well as Bootstrap CSS and JS as well as jQuery 1.12.x:

<head>
  <title>My A-Frame Scene</title>
  
  <!-- Bootstrap Bootswatch theme CSS - other themes available here: https://bootswatch.com -->
  <link rel="stylesheet" href="https://cdn.rawgit.com/thomaspark/bootswatch/gh-pages/slate/bootstrap.min.css" />
  
  <!-- Bootstrap JS Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <!-- A-Frame JS Dependencies -->
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/gladeye/aframe-preloader-component/1.0.2/dist/aframe-preloader-component.min.js"></script>
</head>

<body>
  <a-scene preloader>
    <a-assets>
        <a-asset-item id="model" src="model.obj" preload="true"></a-asset-item>
        <img id="texture1" src="texture1.jpg" crossorigin="anonymous" preload="true">
        <img id="texture2" src="texture2.jpg" crossorigin="anonymous" preload="true">
      </a-assets>
  </a-scene>
</body>

npm

Install via npm:

npm install @gladeye/aframe-preloader-component

Then require and use.

require('aframe');
require('bootstrap');
require('@gladeye/aframe-preloader-component');

Make sure that Bootstrap's CSS classes are included in your HTML.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].